Bộ chọn CSS (selectors)
Bộ chọn (selectors) được dùng để chọn các thành phần muốn định dạng css.
| Bộ chọn | Ví dụ | Mô tả |
|---|---|---|
| * | * | Chọn tất cả các thành phần html. |
| tag | p | Chọn tất cả các thành phần cùng loại. |
| tag01 tag02 | div p | Chọn tất cả thành phần <tag02> bên trong thành phần <tag01>. |
| tag01,tag02 | div,p | Chọn tất cả thành phần <tag01> và <tag02>. |
| tag01+tag02 | div+p | Chọn tất cả thành phần <tag02> được đặt kế và sau thành phần <tag01>. |
| tag01>tag02 | div>p | Chọn tất cả thành phần <tag02> có thành phần cha là <tag01>. |
| .class | .className | Chọn tất cả các thành phần có cùng tên class. |
| #id | #idName | Chọn tất cả các thành phần có cùng tên id. |
| :active | a:active | Chọn các liên kết được kích hoạt. |
| :after | p:after | Thêm nội dung ngay phía sau thành phần. |
| :before | p:before | Thêm nội dung ngay phía trước thành phần. |
| :first-child | p:first-child | Chọn thành phần đầu tiên của thành phần cha chứa nó. |
| :first-letter | p:first-letter | Chọn ký tự đầu tiên của một thành phần. |
| :first-line | p:first-line | Chọn dòng đầu tiên của một thành phần. |
| :focus | input:focus | Thành phần sẽ focus khi được chọn. |
| :hover | a:hover | Chọn các liên kết được hover (di chuyển chuột lên thành phần). |
| :lang(mã ngôn ngữ) | p:lang(vi) | Chọn thành phần với thuộc tính ngôn ngữ có giá trị bắt đầu với "mã ngôn ngữ". |
| :link | a:link | Định dạng cho tất cả liên kết khi chưa được click. |
| :visited | a:visited | Định dạng cho các thành phần đã được click. |
| [Thuộc tính] | [target] | Chọn tất cả các thành phần có cùng thuộc tính (attribute). |
| [Thuộc tính|=ngôn ngữ] | [lang|=vi] | Được sử dụng để chọn tất cả các thành phần với thuộc tính có giá trị = "ngôn ngữ". |
| [Thuộc tính~=giá trị] | [title~=myWeb] | Chọn tất cả các thành phần với thuộc tính chứa một giá trị. |
| [Thuộc tính=giá trị] | [target=_blank] | Chọn tất cả các thành phần với thuộc tính bằng giá trị. |