CSS Selector là gì? Những cách viết CSS có thể bạn chưa biết.

Trước khi  khám phá định nghĩa CSS Selector là gì thì mình mong muốn nói lại học thức về HTML & CSS một tí. Như bạn đã biết các thẻ HTML thường sẽ có thẻ mở <tagvàgt; & thẻ đóng </tagvàgt;  loại trừ các thẻ không có thẻ đóng như <img/> , <input />  bên trong thẻ đó có thể có nhiều thẻ khác nữa. Vậy ta sẽ gọi thẻ tag đó là thẻ cha & các thẻ nằm bên trong nó là thẻ con.

Khi bắt tay vào học Frontend thì các bạn phải nắm vững các định nghĩa về css trong đó có định nghĩa CSS Selector mà bạn cần phải học thuộc lòng. CSS Selector là một bộ chọn để style cho trang web. Hiểu dễ dàng CSS Selector là cho phép bạn hướng tới các phần tử HTML để vận dụng các tính chất CSS cho chúng.

CSS Selector có thể chứa nhiều selector dễ dàng. Giữa các selector dễ dàng, tất cả chúng ta có thể bao gồm một selector phối hợp.

Có bốn bộ kết hợp khác nhau trong CSS:

  • Bộ chọn con cái (cách nhau bởi khoảng trắng)
  • Bộ chọn con (>)
  • Bộ chọn anh chị em liền kề (+)
  • Bộ chọn anh chị em chung (~)

CSS Selector “con cháu”

Quan hệ con cái phù phù hợp với toàn bộ các selector là con của một selectorđược chỉ định.

Chẳng hạn sau chọn toàn bộ các thẻ <ᴘvàgt; bên trong các thẻ <divvàgt;:

div ᴘ {
    background-color: yellow;
}

CSS Selector cha con

Quan hệ con chọn toàn bộ các phần tử là các selector con ngay nhanh chóng của một selector được chỉ định.

Xem Thêm  Thay đổi kích thước hình ảnh trong CSS - cách thay đổi kích thước css hình ảnh

Chẳng hạn sau chọn toàn bộ các thẻ <ᴘvàgt; là các phần tử con ruột của phần tử <divvàgt;:

 

div > ᴘ {
    background-color: yellow;
}

CSS Selector anh chị em liền kề.

Quan hệ anh chị em liền kề chọn toàn bộ các selector đứng gần nhất với một selector được chỉ định.

Chẳng hạn sau chọn toàn bộ các thẻ <ᴘvàgt; được đặt ngay sau các thẻ <divvàgt;:

 

div + ᴘ {
    background-color: yellow;
}

CSS Selector anh chị em

Quan hệ anh chị em là toàn bộ các selector được chọn xếp sau & phải đứng cùng cấp với selector được chỉ định.

Chẳng hạn sau đây chọn toàn bộ các thẻ <ᴘvàgt; là anh em ruột của thẻ <divvàgt; miễn là <ᴘvàgt; xếp sau <divvàgt;:

không dừng lại ở đó còn có các cách viết css selector khác bạn đọc qua bảng sau nhé:

 

SelectorVí dụMô tả..introChọn toàn bộ các thẻ có class=”intro”.class1.class2.name1.name2Chọn toàn bộ các thẻ có class name1 & name2.class1 .class2.name1 .name2Chọn toàn bộ các thẻ có class name2 là con của thẻ có class name1##firstnameChọn toàn bộ các thẻ có id=”firstname”**Chọn tất cảpChọn toàn bộ thẻ <ᴘvàgt;ᴘ.introChọn toàn bộ các thẻ <ᴘvàgt; có class=”intro”div, pChọn toàn bộ các thẻ <divvàgt; & toàn bộ các thẻ <ᴘvàgt; div pChọn toàn bộ các thẻ <ᴘvàgt; là con của thẻ <divvàgt;>div > pChọn toàn bộ các thẻ <ᴘvàgt; elements where the parent is α <divvàgt; element+div + pChọn toàn bộ các thẻ <ᴘvàgt; elements that are placed immediately after <divvàgt; elements~ᴘ ~ ulChọn toàn bộ các thẻ <ulvàgt; hiện ra phía sau thẻ <ᴘvàgt;[][target]Chọn toàn bộ các thẻ có tính chất target chẳng hạn như thẻ <avàgt;[=][target=_blank]Chọn toàn bộ các thẻ có target=”_blank”[~=][title~=flower]Chọn toàn bộ các thẻ có tính chất title chứa từ “flower”[|=][lang|=en]Chọn toàn bộ các thẻ có tính chất lang khởi đầu bằng “en”[^=]α[href^=”https”]Chọn những thẻ <avàgt; có giá trị khởi đầu là “https”[$=]α[href$=”.pdf”]Chọn những thẻ <avàgt; có giá trị tính chất href chấm dứt là “.pdf”[*=]α[href*=”fuvavi”]Chọn những thẻ <avàgt; có tính chất href chứa từ “fuvavi”:activea:activeChọn những thẻ α active::afterp::afterChèn thêm gì đó vào phía sau thẻ <ᴘvàgt;::beforep::beforeChèn thêm gì đó vào phía trước thẻ <ᴘvàgt;:checkedinput:checkedChọn những thẻ <inputvàgt; đã test:defaultinput:defaultChọn những thẻ <inputvàgt; mặc định:disabledinput:disabledChọn những thẻ <inputvàgt; bị disabled (vô hiệu hóa):emptyp:emptyChọn những thẻ <ᴘvàgt; trống không có text hoặc thẻ con bên trong:enabledinput:enabledChọn những thẻ  <inputvàgt; không bị vô hiệu hóa:first-childp:first-childChọn những thẻ <ᴘvàgt; trước hết ở bất kỳ địa điểm nào. ()::first-letterp::first-letterChọn ký tự trước hết của thẻ <ᴘvàgt;::first-linep::first-lineChọn dòng trước hết của thẻ <ᴘvàgt;:first-of-typep:first-of-typeTương tự :first-child :first-of-type cũng chọn những thẻ <ᴘvàgt; trước hết trong danh mục những thẻ <ᴘvàgt;.:focusinput:focusChọn những thẻ <inputvàgt; đang focus:hovera:hoverChọn những thẻ <avàgt; đang rê chuột:in-rangeinput:in-rangeChọn những thẻ <inputvàgt; có giá trị trong phạm vi min – max:indeterminateinput:indeterminateChọn những thẻ <inputvàgt; có giá trị chưa xác nhận:invalidinput:invalidChọn những thẻ <inputvàgt; có giá trị không hợp lệ:lang()ᴘ:lang(it)Selects every <ᴘvàgt; element with α lang attribute equal to “it” (Italian):last-childp:last-childSelects every <ᴘvàgt; element that is the last child of its parent:last-of-typep:last-of-typeSelects every <ᴘvàgt; element that is the last <ᴘvàgt; element of its parent:linka:linkChọn toàn bộ các thẻ unvisited links:not():not(ᴘ)Selects every element that is not α <ᴘvàgt; element:nth-child()ᴘ:nth-child(2)Selects every <ᴘvàgt; element that is the second child of its parent:nth-last-child()ᴘ:nth-last-child(2)Selects every <ᴘvàgt; element that is the second child of its parent, counting from the last child:nth-last-of-type()ᴘ:nth-last-of-type(2)Selects every <ᴘvàgt; element that is the second <ᴘvàgt; element of its parent, counting from the last child:nth-of-type()ᴘ:nth-of-type(2)Selects every <ᴘvàgt; element that is the second <ᴘvàgt; element of its parent:only-of-typep:only-of-typeSelects every <ᴘvàgt; element that is the only <ᴘvàgt; element of its parent:only-childp:only-childSelects every <ᴘvàgt; element that is the only child of its parent:optionalinput:optionalSelects input elements with no “required” attribute:out-of-rangeinput:out-of-rangeSelects input elements with α value outside α specified range::placeholderinput::placeholderSelects input elements with the “placeholder” attribute specified:read-onlyinput:read-onlySelects input elements with the “readonly” attribute specified:read-writeinput:read-writeSelects input elements with the “readonly” attribute NOT specified:requiredinput:requiredSelects input elements with the “required” attribute specified:root:rootSelects the document’s root element::selection::selectionSelects the portion of an element that is selected by α user:target#news:targetSelects the current active #news element (clicked on α URL containing that anchor name):validinput:validChọn toàn bộ các thẻ input elements with α valid value:visiteda:visitedChọn toàn bộ các thẻ visited links

Xem Thêm  Làm cách nào để in đậm văn bản bằng CSS? - làm cho văn bản đậm css

 

Hi vọng bài viết này sẽ giúp các bạn am hiểu hơn về CSS Selector là gì? Nếu mong muốn mình chia sẻ thêm học thức gì hãy để lại phản hồi bên dưới nhé. Cảm ơn bạn đã xem hết bài viết này.

Viết một bình luận