Selectors are patterns used to select which element(s) you want to style.
The CSS3 specification contains several new selectors, and many of them have already been implemented in modern browsers.
| Pattern | Example | Example description | CSS |
|---|---|---|---|
| element1~element2 | p~ul | Selects every ul element that are preceded by a p element | 3 |
| [attribute^=value] | a[src^="https"] | Selects every a element whose src attribute value begins with "https" | 3 |
| [attribute$=value] | a[src$=".pdf"] | Selects every a element whose src attribute value ends with ".pdf" | 3 |
| [attribute*=value] | a[src*="w3schools"] | Selects every a element whose src attribute value contains the substring "w3schools" | 3 |
| :first-of-type | p:first-of-type | Selects every p element that is the first p element of its parent | 3 |
| :last-of-type | p:last-of-type | Selects every p element that is the last p element of its parent | 3 |
| :only-of-type | p:only-of-type | Selects every p element that is the only p element of its parent | 3 |
| :only-child | p:only-child | Selects every p element that is the only child of its parent | 3 |
| :nth-child(n) | p:nth-child(2) | Selects every p element that is the second child of its parent | 3 |
| :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 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every p element that is the second p element of its parent | 3 |
| :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 | 3 |
| :last-child | p:last-child | Selects every p element that is the last child of its parent | 3 |
| :root | :root | Selects the document’s root element | 3 |
| :empty | p:empty | Selects every p element that has no children (including text nodes) | 3 |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) | 3 |
| :enabled | input:enabled | Selects every enabled input element | 3 |
| :disabled | input:disabled | Selects every disabled input element | 3 |
| :checked | input:checked | Selects every checked input element | 3 |
| :not(selector) | :not(p) | Selects every element that is not a p element | 3 |
| ::selection | ::selection | Selects the portion of an element that is selected by a user | 3 |
No comments:
Post a Comment