CSS Selectors

Trong bài viết này, chúng ta sẽ tìm hiểu về một khái niệm không hề mới nhưng không phải ai cũng có thể nắm rõ và sử dụng linh hoạt, CSS Selector.

CSS Selector là gì, nó được chia ra làm những loại như thế nào ?

Selectors là gì ?

Selectors không phải là một điều gì mới mẻ của CSS3. Nó vốn đã tồn tại từ CSS1, và là một phần cực kỳ quan trọng của CSS.

Ban đầu, CSS1 mới chỉ bao gồm khoảng 7 selectors, sau đó nó được mở rộng thêm khoảng 12 cái mới trong CSS2, và rồi lại tiếp tục được cải thiện ở CSS3.

Đối với những người có ít kinh nghiệm về CSS, hay chưa nắm rõ về các Selectors thì những đoạn code CSS hầu như chỉ sự dụng id hay class của các elements. Điều này dẫn đến những đoạn code CSS sẽ rất dài, rối rắm và nhiều lúc khó kiểm soát. Sử dụng Selectors một cách linh hoạt sẽ giúp chúng ta tận dụng được sức mạnh của CSS, và đôi lúc sẽ tránh được việc phải viết những đoạn code javascript không cần thiết.

Các loại Selectors

CSS Selectors có thể được chia ra làm 3 loại chính, ta tạm gói đó là DOM Selectors, Pseudo Selectors và Combinator.

DOM selectors bao gồm những bộ chọn cho phép ta select những element được định nghĩa trong document tree (tức có trong code html). Ví dụ như element có tên tag là div, có tên class là myclass, hay element có attribute href bằng một giá trị nào đó. DOM selectors bao gồm:

• Class Selectors: select theo class
• Id Selectors: select theo id
• Type Selectors: Select theo type của element
• Attribute Selectors: Select theo các attribute của element

Pseudo Selectors bao gồm những bộ chọn cho phép ta select những element, hay những thông tin về element, dựa vào những thông tin mà không được đề cập trực tiếp trong document tree. Chẳng hạn như phần tử đầu tiên của một list, chữ cái đầu tiên của một từ ... Pseudo Selectors có thể được chia ra làm 2 loại là Pseudo-Classes và Pseudo-Elements

• Pseudo-classes: Có thể hiểu là "giả class", tức ta coi trạng thái, hay thông tin đặc biệt của element như là một class. Ví dụ như một link với trạng thái là visited hay active, một phần tử trong list có thứ tự là số chẵn ...
• Pseudo-elements: Có thể hiểu là "giả element", tức nó không phải là một element hoàn chỉnh, mà có thể chỉ là một bộ phận nào đó của một từ, của một đoạn text ...

Cuối cùng, Combinator cho phép ta join các selectors lại với nhau. Có những loại Combinator như sau:

• Descendant combinator: Select những element là con cháu của một element khác.
• Child combinator: Select những element là con của một element khác. Chú ý ở đây "con cháu" được dùng để chỉ element nằm trong element khác, còn "con" là chỉ element nằm trực tiếp ngay bên trong của element khác.Ví dụ như <div><span><p>example</p><span></div> thì chỉ có span là "con" của element div, còn cả span và p đều là "con cháu" của div.
• Adjacent sibling combinator: Select element nằm liền kề và ngang hàng với element khác. (các element "anh em" kề nhau)
• General sibling combinator: Select element ngang hàng với element khác. (các element "anh em")

Lịch sử Selectors

Tiếp theo hãy cùng nhìn lại lịch sử phát triển của CSS Selectors. Những selectors nào đã được đưa vào qua từng phiên bản CSS level 1 và CSS level 2. Ý nghĩa và cách sử dụng những selectors đó ra sao ?

Cuối cùng, dưới đây là những selectors mới được thêm vào CSS3

• E[foo^="bar"]: Element e có attribute foo bắt đầu bằng bar. Đây là một Attribute selector.
• E[foo$="bar"]: Element e có attribute foo kết thúc bằng bar. Đây là một Attribute selector.
• E[foo*="bar"]: Element e có attribute foo có chứa từ bar. Đây là một Attribute selector. Chú ý rằng selector này khác với E[foo~="bar"] đã có từ CSS2. Phép ~ yêu cầu attribute có chứa nhiều từ được ngăn cách bởi dấu cách, và một trong những từ đó là bar, trong khi phép * chỉ yêu cầu có chứa từ bar.
• E ~ F: Element F nằm ngay sau element E. Đây là một General sibling combinator. Nó hơi khác với E + F đã có từ CSS2 ở chỗ E + F yêu cầu E đứng ngay phía trước F.
• E:root: Select document root
• E:nth-child(n) và E:nth-of-type(n): Đây là 2 pseudo-classes mới được thêm vào. Nó cho phép chúng ta chọn ra những elements dựa vào vị trí của nó trong document tree. nth-child cho phép select ra những element là dựa trên vị trí của nó so với những element con khác, còn nth-of-type thì không phải là dựa vào vị trí của nó trong toàn bộ những element con, mà chỉ là trong số những element có type nhất định. (n) là thông số mang ý nghĩa không quan tâm đến vị trí. Ngoài ra ta có thể sử dụng 2n hay even với ý nghĩa là những element ở vị trí chẵn, 2n+1 hay odd với ý nghĩa là những element ở vị trí lẻ. Hay ta có thể dùng hẳn giá trị cụ thể, như nth-child(5) để chọn element con thứ 5. Chú ý rằng index bắt đầu từ 1. Ta có thể thấy rằng E:nth-child(n) và E:nth-of-type(n) sẽ cho kết quả là như nhau , bởi nó sẽ cùng select tất cả những element con có type là E. Còn E:nth-child(2n) và E:nth-of-type(2n) sẽ cho kết quả khác nhau, một cái là select những element con ở vị trí chẵn, mà có type là E, còn một cái là select những element E ở vị trí chẵn trong tập hợp chỉ gồm những element E.
• E:nth-last-child(n) và E:nth-last-of-type(n): Hai pseudo-classes này tương tự như E:nth-child(n) và E:nth-of-type(n), nhưng thay vì đếm từ trên xuống, chúng sẽ đếm ngược từ dưới lên. Chẳng hạn như p:nth-last-child(2) thì sẽ lấy element p thứ 2 tính từ cuối lên.
• E:first-child, E:last-child và E:first-of-type, E:last-of-type: Đây là những trường hợp đặc biệt của 4 pseudo-classes đã đề cập ở phía trên. Trong đó E:first-child sẽ tương đương với E:nth-child(1), còn E:last-child sẽ tương đương với E:nth-last-child(1). Tương tự đối với E:first-of-type E:last-of-type.
• E:only-child và E:only-of-type: Hai pseudo-classes này cho phép ta chọn ra những element mà có cha, nhưng không có những element ngang hàng (đối với only-child) hay không có những element cùng loại ở cùng hàng (only-of-type).
• E:empty: Select element E mà nó là rỗng (không có element con, không có text ...)
• E:target: Element E được target bởi URI (Tức là một element được target khi ta click vào một link nào đó trong cùng một page)
• E:enabled và E:disabled: User Interface Element E được enable hay disable (chẳng hạn như một input của một form ...)
• E:checked: User Interface Element E được check (chẳng hạn như radio button hay checkbox ...)
• E:not(F): Select những element E ngoại trừ những element F. F có thể là cả DOM selectors hay Pseudo selectors.