CSS selectors A to Z
CSS selectors A to Z: 34 terms, each with what it does and a link to its full page.
Updated
A selector is the part of a CSS rule that says which elements the rule styles: p styles every paragraph, .intro every element with the class intro, nav a every link inside a nav.
Here is every CSS selector in the glossary, A to Z, with the pattern you type in the Syntax column. Pick a letter to jump down the list, or pick a selector to read its full page with an example.
| Term | Syntax | What it does |
|---|---|---|
| A | ||
:active | a:active | Styles an element while it is being pressed. |
| Adjacent sibling combinator | h2 + p | The + between selectors: matches the element right after another. |
::after | .price::after | Adds generated content at the end of an element. |
| Attribute selector | input[type="email"] | Selects elements by an attribute, written in [brackets]. |
| B | ||
::before | .note::before | Adds generated content at the start of an element. |
| C | ||
:checked | input:checked | Styles checkboxes and radio buttons that are selected. |
| Child combinator | ul > li | The > between selectors: matches direct children only. |
| Class selector | .intro | Starts with a dot and selects elements with that class. |
| CSS rule | p { color: gray; } | A selector plus a block of declarations: which elements, and how they look. |
| D | ||
| Descendant combinator | nav a | A space between selectors: matches elements anywhere inside another. |
:disabled | button:disabled | Styles form controls that are switched off. |
| F | ||
:first-child | li:first-child | Selects an element that is the first child of its parent. |
:focus | input:focus | Styles the element that has keyboard focus. |
| Functional pseudo-class | li:not(.sold-out) | A pseudo-class that takes selectors in brackets, like :not(). |
| G | ||
| General sibling combinator | h2 ~ p | The ~ between selectors: matches every later sibling. |
| H | ||
:has() | .card:has(img) | Styles an element based on what it contains. |
:hover | a:hover | Styles an element while the mouse is over it. |
| I | ||
| ID selector | #main | Starts with # and selects the one element with that id. |
:is() | :is(h1, h2, h3) | Matches any selector in its list. |
| L | ||
:last-child | li:last-child | Selects an element that is the last child of its parent. |
| M | ||
::marker | li::marker | Styles the bullet or number of a list item. |
| N | ||
:not() | button:not(.primary) | Matches elements that don't match the selector inside. |
:nth-child() | tr:nth-child(even) | Selects children by position, like odd rows or every third item. |
| P | ||
::placeholder | input::placeholder | Styles the hint text in an empty input. |
| Pseudo-class | button:hover | Styles an element in a state, like :hover, with one colon. |
| Pseudo-element | p::first-line | Styles part of an element, or adds decoration, with two colons. |
| S | ||
| Selector | nav a.active | The part of a rule that picks which elements to style. |
| Selector list | h1, h2, h3 | Several selectors separated by commas, sharing one set of styles. |
| Selector matching | Browsers read selectors right to left: the last part first. | |
| Specificity | How precise a selector is; the more specific rule wins. | |
| T | ||
| Type selector | p | Selects every element with a given tag name, like p or img. |
| U | ||
| Universal selector | * | The * selector: matches every element. |
| V | ||
:visited | a:visited | Styles links the user has already opened. |
| W | ||
:where() | :where(ul, ol) li | Like :is() but with zero specificity, so easy to override. |