18/08/2018, 11:12
Danh sách tất cả các bộ chọn (selector) trong CSS
Bộ chọn Ví dụ Mô tả ví dụ .class .info - Chọn tất cả các phần tử mà thuộc tính class của nó có chứa giá trị là .info #id #progress - Chọn phần tử có thuộc tính id với giá trị là progress * * - ...
| Bộ chọn | Ví dụ | Mô tả ví dụ |
|---|---|---|
| .class | .info | - Chọn tất cả các phần tử mà thuộc tính class của nó có chứa giá trị là .info |
| #id | #progress | - Chọn phần tử có thuộc tính id với giá trị là progress |
| * | * | - Chọn tất cả các phần tử trong trang web |
| element | ||
| element,element | ||
| element element | ||
| element>element | ||
| element+element | ||
| element1~element2 | ||
| [attribute] | ||
| [attribute=value] | ||
| [attribute~=value] | ||
| [attribute|=value] | ||
| [attribute^=value] | ||
| [attribute$=value] | ||
| [attribute*=value] | ||
| :active | a:active | - Chọn liên kết đang được người dùng nhấp vào |
| ::after | p::after | - Chọn phần nằm ngay sát phía sau nội dung bên trong các phần tử <p> |
| ::before | p::before | - Chọn phần nằm ngay sát phía trước nội dung bên trong các phần tử <p> |
| :checked | input:checked | - Chọn tất cả các phần tử <input> được thiết lập thuộc tính checked |
| :disabled | textarea:disabled | - Chọn tất cả các phần tử <textarea> được thiết lập thuộc tính disabled |
| :empty | div:empty | - Chọn tất cả các phần tử <div> mà phần nội dung ở bên trong nó là rỗng |
| :enabled | textarea:enabled | - Chọn tất cả các phần tử <textarea> không bị thiết lập thuộc tính disabled |
| :first-child | p :first-child | - Chọn các phần tử nằm bên trong phần tử <p> với điều kiện các phần tử đó phải là phần tử con đầu tiên của cha nó |
| ::first-letter | p::first-letter | - Chọn ký tự đầu tiên bên trong các phần tử <p> |
| ::first-line | p::first-line | - Chọn dòng chữ đầu tiên bên trong các phần tử <p> |
| :first-of-type | p:first-of-type | - Chọn tất cả những phần tử <p> với điều kiện nó phải là phần tử có kiểu <p> đầu tiên bên trong cha nó |
| :focus | textarea:focus | - Chọn phần tử <textarea> đang được người dùng truy cập vào |
| :hover | a:hover | - Chọn liên kết đang bị người dùng dí chuột vào |
| :in-range | input:in-range | - Chọn các phần tử <input> có giá trị nằm trong phạm vi cho phép |
| :invalid | input:invalid | - Chọn tất cả các phần tử <input> mà giá trị của nó là không hợp lệ |
| :last-child | p :last-child | - Chọn các phần tử nằm bên trong phần tử <p> với điều kiện các phần tử đó phải là phần tử con cuối cùng của cha nó |
| :last-of-type | p:last-of-type | - Chọn tất cả những phần tử <p> với điều kiện nó phải là phần tử có kiểu <p> cuối cùng bên trong cha nó |
| :link | a:link | - Chọn tất cả các liên kết chưa được viếng thăm |
| :not(selector) | :not(p) | - Chọn tất cả các phần tử không phải là phần tử <p> |
| :nth-child(n) | :nth-child(3) | - Chọn tất cả các phần tử là phần tử con thứ ba của cha nó |
| :nth-last-child(n) | :nth-last-child(3) | - Chọn tất cả các phần tử là phần tử con thứ ba (xác định theo chiều từ dưới lên) của cha nó |
| :nth-last-of-type(n) | p:nth-last-of-type(3) | - Chọn những phần tử <p> là phần tử có kiểu <p> thứ ba theo chiều từ dưới lên bên trong cha nó |
| :nth-of-type(n) | p:nth-of-type(3) | - Chọn những phần tử <p> là phần tử có kiểu <p> thứ ba bên trong cha nó |
| :only-of-type | p:only-of-type | - Chọn những phần tử <p> là phần tử có kiểu <p> duy nhất bên trong cha nó |
| :only-child | body :only-child | - Chọn tất cả những phần tử bên trong <body> với điều kiện những phần tử đó phải là phần tử con duy nhất của cha nó. |
| :optional | textarea:optional | - Chọn các phần tử <textarea> không có thiết lập thuộc tính required |
| :out-of-range | input:out-of-range | - Chọn các phần tử <input> có giá trị nằm ngoài phạm vi cho phép |
| :required | textarea:required | - Chọn các phần tử <textarea> có thiết lập thuộc tính required |
| :root | :root | - Chọn phần tử gốc trong trang web |
| ::selection | ::selection | - Chọn phần văn bản đang được người dùng bôi đen |
| :target | ||
| :valid | input:valid | - Chọn tất cả các phần tử <input> mà giá trị của nó là hợp lệ |
| :visited | a:visited | - Chọn tất cả các liên kết đã được viếng thăm |
