CSS Selectors Cheatsheet
A complete reference of all CSS selectors. From basic type selectors to advanced pseudo-classes and combinators, find the right selector for targeting any element.
Basic Selectors
| Selector | Example | Description |
|---|---|---|
| * | * { } | Universal selector. Matches every element. |
| element | p { } | Type selector. Matches all elements of the given type. |
| .class | .intro { } | Class selector. Matches elements with the specified class. |
| #id | #header { } | ID selector. Matches the element with the specified ID. |
| selector, selector | h1, h2 { } | Grouping selector. Matches all elements that match any of the selectors. |
Attribute Selectors
| Selector | Example | Description |
|---|---|---|
| [attr] | [disabled] { } | Matches elements with the specified attribute, regardless of value. |
| [attr=value] | [type="text"] { } | Matches elements whose attribute value is exactly the given value. |
| [attr~=value] | [class~="card"] { } | Matches elements whose attribute value is a space-separated list containing the value. |
| [attr|=value] | [lang|="en"] { } | Matches elements whose attribute value is exactly the value or starts with value followed by a hyphen. |
| [attr^=value] | [href^="https"] { } | Matches elements whose attribute value begins with the specified value. |
| [attr$=value] | [src$=".png"] { } | Matches elements whose attribute value ends with the specified value. |
| [attr*=value] | [class*="btn"] { } | Matches elements whose attribute value contains the specified value anywhere. |
| [attr=value i] | [type="TEXT" i] { } | Case-insensitive attribute value matching. |
Combinators
| Selector | Example | Description |
|---|---|---|
| A B | div p { } | Descendant combinator. Matches B elements that are descendants of A. |
| A > B | ul > li { } | Child combinator. Matches B elements that are direct children of A. |
| A + B | h2 + p { } | Adjacent sibling combinator. Matches the first B element immediately after A. |
| A ~ B | h2 ~ p { } | General sibling combinator. Matches all B elements that follow A (same parent). |
Pseudo-Classes
| Selector | Example | Description |
|---|---|---|
| :hover | a:hover { } | Matches when the user hovers over the element with a pointing device. |
| :focus | input:focus { } | Matches when the element has received focus. |
| :focus-visible | button:focus-visible { } | Matches when the element has focus and the browser determines focus should be visible. |
| :focus-within | form:focus-within { } | Matches when the element or any descendant has focus. |
| :active | button:active { } | Matches when the element is being activated (e.g., clicked). |
| :visited | a:visited { } | Matches links that have been visited. |
| :link | a:link { } | Matches links that have not been visited. |
| :target | :target { } | Matches the element whose ID matches the URL fragment. |
| :first-child | li:first-child { } | Matches an element that is the first child of its parent. |
| :last-child | li:last-child { } | Matches an element that is the last child of its parent. |
| :nth-child(n) | tr:nth-child(2n) { } | Matches elements based on their position among siblings. Supports formulas like 2n, odd, even. |
| :nth-last-child(n) | li:nth-last-child(2) { } | Like :nth-child but counts from the last child. |
| :nth-of-type(n) | p:nth-of-type(odd) { } | Matches elements of a type based on their position among siblings of the same type. |
| :first-of-type | p:first-of-type { } | Matches the first element of its type among siblings. |
| :last-of-type | p:last-of-type { } | Matches the last element of its type among siblings. |
| :only-child | p:only-child { } | Matches an element that is the only child of its parent. |
| :only-of-type | p:only-of-type { } | Matches an element that is the only one of its type among siblings. |
| :empty | div:empty { } | Matches elements that have no children (including text nodes). |
| :not(selector) | :not(.hidden) { } | Negation pseudo-class. Matches elements that do not match the given selector. |
| :is(selector) | :is(h1, h2, h3) { } | Matches any element that matches one of the selectors in the list. Forgiving selector list. |
| :where(selector) | :where(h1, h2) { } | Same as :is() but with zero specificity. |
| :has(selector) | div:has(> img) { } | Matches an element if any of the relative selectors match when anchored against this element. |
| :checked | input:checked { } | Matches checkboxes, radio buttons, or options that are checked or selected. |
| :disabled | input:disabled { } | Matches form elements that are disabled. |
| :enabled | input:enabled { } | Matches form elements that are enabled. |
| :required | input:required { } | Matches form elements that are required. |
| :optional | input:optional { } | Matches form elements that are optional. |
| :valid | input:valid { } | Matches form elements whose value is valid. |
| :invalid | input:invalid { } | Matches form elements whose value is invalid. |
| :placeholder-shown | input:placeholder-shown { } | Matches input elements currently showing placeholder text. |
| :root | :root { } | Matches the root element of the document (usually <html>). |
Pseudo-Elements
| Selector | Example | Description |
|---|---|---|
| ::before | p::before { } | Creates a pseudo-element as the first child of the matched element. Requires the content property. |
| ::after | p::after { } | Creates a pseudo-element as the last child of the matched element. Requires the content property. |
| ::first-line | p::first-line { } | Applies styles to the first line of a block-level element. |
| ::first-letter | p::first-letter { } | Applies styles to the first letter of a block-level element. |
| ::placeholder | input::placeholder { } | Styles the placeholder text of an input or textarea element. |
| ::selection | ::selection { } | Applies styles to the portion of the document highlighted by the user. |
| ::marker | li::marker { } | Styles the marker box of a list item (bullet or number). |
| ::backdrop | dialog::backdrop { } | Styles the backdrop behind a dialog or element in fullscreen mode. |
CSS Specificity
When multiple rules target the same element, the browser uses specificity to determine which styles to apply. Specificity is calculated as a three-part value (A, B, C):
| Level | Specificity | Example |
|---|---|---|
| Inline styles | 1,0,0,0 | style="..." |
| IDs | 0,1,0,0 | #header |
| Classes, attributes, pseudo-classes | 0,0,1,0 | .nav, [type], :hover |
| Elements, pseudo-elements | 0,0,0,1 | div, ::before |
| Universal selector, :where() | 0,0,0,0 | *, :where() |
Note: !important overrides all specificity but should be used sparingly. :is() and :not() take the specificity of their most specific argument, while :where() always has zero specificity.