Trong CSS, Selector là mẫu được sử dụng để chọn (các) yếu tố mà bạn muốn tạo kiểu. Bài này giúp các bạn thiết kế giao diện (theme) dễ dàng tạo các stylesheet bắt mắt cho trang web.
Nhấn vào các selector để mở trang chi tiết về cách sử dụng của selector đó.
| Selector | Ví dụ | Giải thích ví dụ |
|---|---|---|
| .class | .intro | Chọn tất cả các phần tử với class=”intro” |
| #id | #firstname | Chọn tất cả các phần tử với id=”firstname” |
| * | * | Chọn tất cả các phần tử |
| element | p | Chọn tất cả các phần tử <p> |
| element,element | div, p | Chọn tất cả các phần tử <div> và tất cả các phần tử <p>
Xem bài viết đầy đủ tại https://www.daipho.com
|
| element element | div p | Chọn tất cả các phần tử <p> bên trong phần tử <div> |
| element>element | div > p | Chọn tất cả các phần tử <p> có phần tử cha là <div> |
| element+element | div + p | Chọn tất cả các phần tử <p> liền sau phần tử <div>
Xem bài viết đầy đủ tại https://www.daipho.com
|
| element1~element2 | p ~ ul | Chọn tất cả các phần tử <ul> liền trước phần tử <p> |
| [attribute] | [target] | Chọn tất cả các phần tử có thuộc tính target |
| [attribute=value] | [target=_blank] | Chọn tất cả các phần tử có thuộc tính target=”_blank” |
| [attribute~=value] | [title~=flower] | Chọn tất cả các phần tử có thuộc tính title có chứa từ “flower” |
| [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 với “en” |
| [attribute^=value] | a[href^=”https”] | Chọn tất cả các phần tử <a> có giá trị thuộc tính href bắt đầu với “https” |
| [attribute$=value] | a[href$=”.pdf”] | Chọn tất cả các phần tử <a> có giá trị thuộc tính href kết thúc với “.pdf” |
| [attribute*=value] | a[href*=”daipho.com”] | Chọn tất cả các phần tử <a> có giá trị thuộc tính href có chứa chuỗi con “daipho.com” |
| :active | a:active | Chọn liên kết ở trạng thái active |
| ::after | p::after | Chèn thành phần nào đó vào sau nội dung của mỗi phần tử <p> |
| ::before | p::before | Chèn thành phần nào đó vào trước nội dung của mỗi phần tử <p> |
| :checked | input:checked | Chọn những phần tử <input> ở trạng thái checked |
| :disabled | input:disabled | Chọn những phần tử <input> ở trạng thái disabled |
| :empty | p:empty | Chọn những phần tử <p> that has no children (including text nodes) |
| :enabled | input:enabled | Chọn những phần tử <input> ở trạng thái enabled |
| :first-child | p:first-child | Chọn những phần tử <p> là con đầu tiên của phần tử cha |
| ::first-letter | p::first-letter | Chọn the first letter of every <p> element |
| ::first-line | p::first-line | Chọn the first line of every <p> element |
| :first-of-type | p:first-of-type | Chọn phần tử <p> xuất hiện đầu tiên trong phần tử cha |
| :focus | input:focus | Selects the input element which has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects input elements with a value within a specified range |
| :invalid | input:invalid | Chọn tất cả các phần tử input elements with an invalid value |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute equal to “it” (Italian) |
| :last-child | p:last-child | Selects every <p> element that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Chọn tất cả các phần tử unvisited links |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> 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 <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| :only-child | p:only-child | Selects every <p> 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 |
| :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 document’s 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 phần tử input with a valid value |
| :visited | a:visited | Chọn tất cả các phần tử visited links. Xem bài viết đầy đủ tại https://www.daipho.com |
