Trước khi tìm hiểu khái niệm CSS Selector là gì thì mình muốn nhắc lại kiến thức về HTML và CSS một chút. Như bạn đã biết các thẻ HTML thường sẽ có thẻ mở và thẻ đóngngoại trừ các thẻ không có thẻ đóng như
CSS Selector có thể chứa nhiều selector đơn giản. Giữa các selector đơn giản, chúng ta có thể bao gồm một selector kết hợp.
Có bốn bộ phối hợp khác nhau trong CSS:
- Bộ chọn con cháu [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 cháu phù hợp với tất cả các selector là con của một selectorđược chỉ định.
Ví dụ sau chọn tất cả các thẻ
bên trong các thẻ
CSS Selector cha con
Quan hệ con chọn tất cả các phần tử là các selector con ngay lập tức của một selector được chỉ định.
Ví dụ sau chọn tất cả các thẻ
là các phần tử con ruột của phần tử
CSS Selector anh chị em liền kề.
Quan hệ anh chị em liền kề chọn tất cả các selector đứng gần nhất với một selector được chỉ định.
Ví dụ sau chọn tất cả các thẻ
được đặt ngay sau các thẻ
CSS Selectoranh chị em
Quan hệ anh chị em là tất cả các selector được chọn đứng sau và phải đứng cùng cấp với selector được chỉ định.
Ví dụ sau đây chọn tất cả các thẻ
là anh em ruột của thẻ
đứng sau
Ngoài ra còn có các cách viết css selector khác bạn tham khảo bảng sau nhé:
| .class | .intro | Chọn tất cả các thẻ có class=intro |
| .class1.class2 | .name1.name2 | Chọn tất cả các thẻ có class name1 và name2 |
| .class1 .class2 | .name1 .name2 | Chọn tất cả các thẻ có class name2là con của thẻ có class name1 |
| #id | #firstname | Chọn tất cả các thẻ có id=firstname |
| * | * | Chọn tất cả |
| element | p | Chọn tất cả thẻ |
| element.class | p.intro | Chọn tất cả các thẻ có class=intro |
| element,element | div, p | Chọn tất cả các thẻ và tất cả các thẻ |
| element element | div p | Chọn tất cả các thẻ là con của thẻ |
| element>element | div > p | Chọn tất cả các thẻ elements where the parent is a element |
| element+element | div + p | Chọn tất cả các thẻ elements that are placed immediately after elements |
| element1~element2 | p ~ ul | Chọn tất cả các thẻ
|
| [attribute] | [target] | Chọn tất cả các thẻ có thuộc tính target ví dụ như thẻ |
| [attribute=value] | [target=_blank] | Chọn tất cả các thẻ có target=_blank |
| [attribute~=value] | [title~=flower] | Chọn tất cả các thẻ có thuộc tính title chứa từ flower |
| [attribute|=value] | [lang|=en] | Chọn tất cả các thẻ có thuộc tính lang bắt đầu bằng en |
| [attribute^=value] | a[href^=https] | Chọn những thẻ có giá trị bắt đầu là https |
| [attribute$=value] | a[href$=.pdf] | Chọn những thẻ có giá trị thuộc tính href kết thúc là .pdf |
| [attribute*=value] | a[href*=fuvavi] | Chọn những thẻ có thuộc tính href chứa từ fuvavi |
| :active | a:active | Chọn những thẻ a active |
| ::after | p::after | Chèn thêm gì đó vào phía sau thẻ |
| ::before | p::before | Chèn thêm gì đó vào phía trước thẻ |
| :checked | input:checked | Chọn những thẻ đã check |
| :default | input:default | Chọn những thẻ mặc định |
| :disabled | input:disabled | Chọn những thẻ bị disabled [vô hiệu hóa] |
| :empty | p:empty | Chọn những thẻ trống không có text hoặc thẻ con bên trong |
| :enabled | input:enabled | Chọn những thẻ không bị vô hiệu hóa |
| :first-child | p:first-child | Chọn những thẻ đầu tiên ở bất kỳ vị trí nào. [] |
| ::first-letter | p::first-letter | Chọn ký tự đầu tiên của thẻ |
| ::first-line | p::first-line | Chọn dòng đầu tiên của thẻ |
| :first-of-type | p:first-of-type | Tương tự :first-child :first-of-type cũng chọn những thẻ đầu tiên trong danh sách những thẻ . |
| :focus | input:focus | Chọn những thẻ đang focus |
| :hover | a:hover | Chọn những thẻ đang rê chuột |
| :in-range | input:in-range | Chọn những thẻ có giá trị trong phạm vi min max |
| :indeterminate | input:indeterminate | Chọn những thẻ có giá trị chưa xác định |
| :invalid | input:invalid | Chọn những thẻ có giá trị không hợp lệ |
| :lang[language] | p:lang[it] | Selects every element with a lang attribute equal to it [Italian] |
| :last-child | p:last-child | Selects every element that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every element that is the last element of its parent |
| :link | a:link | Chọn tất cả các thẻ unvisited links |
| :not[selector] | :not[p] | Selects every element that is not a element |
| :nth-child[n] | p:nth-child[2] | Selects every element that is the second child of its parent |
| :nth-last-child[n] | p:nth-last-child[2] | Selects every element that is the second child of its parent, counting from the last child |
| :nth-last-of-type[n] | p:nth-last-of-type[2] | Selects every element that is the second element of its parent, counting from the last child |
| :nth-of-type[n] | p:nth-of-type[2] | Selects every element that is the second element of its parent |
| :only-of-type | p:only-of-type | Selects every element that is the only element of its parent |
| :only-child | p:only-child | Selects every element that is the only child of its parent |
| :optional | input:optional | Selects input elements with no required attribute |
| :out-of-range | input:out-of-range | Selects input elements with a value outside a specified range |
| ::placeholder | input::placeholder | Selects input elements with the placeholder attribute specified |
| :read-only | input:read-only | Selects input elements with the readonly attribute specified |
| :read-write | input:read-write | Selects input elements with the readonly attribute NOT specified |
| :required | input:required | Selects input elements with the required attribute specified |
| :root | :root | Selects the documents root element |
| ::selection | ::selection | Selects the portion of an element that is selected by a user |
| :target | #news:target | Selects the current active #news element [clicked on a URL containing that anchor name] |
| :valid | input:valid | Chọn tất cả các thẻ input elements with a valid value |
| :visited | a:visited | Chọn tất cả các thẻ visited links |
Hi vọng bài viết này sẽ giúp các bạn hiểu rõ hơn về CSS Selector là gì? Nếu muốn mình chia sẻ thêm kiến thức gì hãy để lại bình luận bên dưới nhé. Cảm ơn bạn đã xem hết bài viết này.