Lập trình
Tổng hợp các bộ chọn selectors trong lập trình CSS
Trong CSS, các bộ chọn ( selectors) là các qui ước được sử dụng trong CSS để định kiểu cho các phần tử (các thẻ) trên trang web. Từ đó bạn mới khai báo (declaration) các thuộc tính (property) và giá trị (value) cho phần tử đó.
Dưới đây là các cột “CSS” đưa ra các phiên bản thuộc tính khác nhau của CSS (CSS1, CSS2, hoặc CSS3).
| Bộ chọn | Ví dụ | Mô tả các ví dụ | CSS |
|---|---|---|---|
| .class | .intro | Chọn tất cả các phần tử có class=”intro” | 1 |
| #id | #firstname | Chọn tất cả các phần tử có id=”firstname” | 1 |
| * | * | Chọn tất cả các phần tử | 2 |
| element | p | Chọn tất cả các phần tử | 1 |
| element,element | div, p | Chọn tất cả các phần tử
và phần tử |
1 |
| element element | div p | Chọn tất cả các phần tửvà bên trong phần tử | 1 |
| element>element | div > p | Chọn tất cả các phần tửcó phần tử cha là | 2 |
| element element | div p | Chọn tất cả các phần tửđược đặt phía sau phần tử | 2 |
| element1~element2 | p ~ ul | Chọn tất cả các phần tử
|
3 |
| [attribute] | [target] | Chọn tất cả các phần tử có cùng thuộc tính | 2 |
| [attribute=value] | [target=_blank] | Chọn tất cả các phần tử có thuộc tính bằng giá trị( target=”_blank”) | 2 |
| [attribute~=value] | [title~=flower] | Chọn tất cả các phần tử có tiêu đề của thuộc tính có chứa từ “flower” | 2 |
| [attribute|=value] | [lang|=en] | Chọn tất cả các phần tử có giá trị thuộc tính “lang” bắt đầu bằng “en” | 2 |
| [attribute^=value] | a[href^=”https”] | Chọn tất cả các phần tử có giá trị thuộc tính “href” bắt đầu bằng “https” | 3 |
| [attribute$=value] | a[href$=”.pdf”] | Chọn tất cả các phần tử có giá trị thuộc tính “href” kết thúc bằng”.pdf” | 3 |
| [attribute*=value] | a[href*=”timoday”] | Chọn tất cả các phần tử có giá trị thuộc tính “href” chứa chuỗi”timoday” | 3 |
| :active | a:active | Chọn tất cả các liên kết được kích hoạt | 1 |
| ::after | p::after | Chèn thêm nội dung ngay phía sau của các phần tử | 2 |
| ::before | p::before | Chèn thêm nội dung ngay phía trước của các phần tử | 2 |
| :checked | input:checked | Chọn tất cả các phần tử đang được chọn (selected) | 3 |
| :disabled | input:disabled | Chọn tất cả các phần tử đang được vô hiệu hoá (disabled) | 3 |
| :empty | p:empty | Chọn tất cả các phần tửkhông chứa phần tử con (bao gồm cả các nút văn bản) | 3 |
| :enabled | input:enabled | Chọn tất cả các phần tử đang được kích hoạt | 3 |
| :first-child | p:first-child | Chọn các phần tửcó phần tử đầu tiên của phần tử cha chứa nó | 2 |
| ::first-letter | p::first-letter | Chọn kí tự đầu tiên của phần tử | 1 |
| ::first-line | p::first-line | Chọn dòng đầu tiên của các phần tử | 1 |
| :first-of-type | p:first-of-type | Chọn tất cả các phần tửcó phần tử đầu tiên
là phần tử cha |
3 |
| :focus | input:focus | Chọn các phần tử nhận focus | 2 |
| :hover | a:hover | Chọn các liên kết khi chuột di chuyển qua | 1 |
| :in-range | input:in-range | Chọn phần tử có giá trị trong phạm vi nhất định | 3 |
| :invalid | input:invalid | Chọn tất cả các phần tử có giá trị không hợp lệ | 3 |
| :lang(language) | p:lang(it) | Chọn tất cả các phần tửcó giá trị thuộc tính “lang” bằng “it” | 2 |
| :last-child | p:last-child | Chọn tất cả các phần tử là phần tử con cuối cùng của phần tử cha | 3 |
| :last-of-type | p:last-of-type | Chọn tất cả các phần tửlà thuộc tính cuối cùng của phần tử cha | 3 |
| :link | a:link | Chọn tất cả các liên kết khi chưa được click | 1 |
| :not(selector) | :not(p) | Chọn tất cả các phần tử không phải là một phần tử | 3 |
| :nth-child(n) | p:nth-child(2) | Chọn tất cả các phần tửlà phần tử thứ hai của phần tử cha | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Chọn tất cả các phần tửlà phần tử con thứ hai của phần tử cha, tính từ phần tử con cuối cùng | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Chọn tất cả các phần tửlà phần tử thuộc tính thứ hai của phần tử cha, tính từ phần tử thuộc tính con cuối cùng | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Chọn tất cả các phần tửlà phần tử thuộc tính con thứ hai của phần tử cha | 3 |
| :only-of-type | p:only-of-type | Chọn tất cả các phần tửlà thuộc tính duy nhất của phần tử cha | 3 |
| :only-child | p:only-child | Chọn tất cả các phần tửlà con duy nhất của phần tử cha | 3 |
| :optional | input:optional | Chọn tất cả các phần tử đầu vào không có thuộc tính “required” | 3 |
| :out-of-range | input:out-of-range | Chọn tất cả các phần tử đầu vào có giá trị ngoài một phạm vi nhất định | 3 |
| :read-only | input:read-only | Chọn tất cả các phần tử đầu vào có thuộc tính xác định “readonly” | 3 |
| :read-write | input:read-write | Chọn tất cả các phần tử đầu vào có thuộc tính không xác định “readonly” | 3 |
| :required | input:required | Chọn tất cả các phần tử đầu vào có thuộc tính “required” xác định | 3 |
| :root | :root | Chọn các phần tử gốc của văn bản | 3 |
| ::selection | ::selection | Chọn các phần tử được người dùng lựa chọn | |
| :target | #news:target | Chọn các phần tử đang hoạt động hiện tại (click trong các liên kết anchor name) | 3 |
| :valid | input:valid | Chọn tất cả các phần tử đầu vào có một giá trị hợp lệ | 3 |
| :visited | a:visited | Chọn tất cả các liên kết được truy cập | 1 |