CSS Selector Cheat Sheet
Basic Selectors
| Selector | Example | Description |
|---|---|---|
| Universal | * | Selects all elements |
| Type | div | Selects all <div> elements |
| Class | .classname | Selects all elements with class="classname" |
| ID | #idname | Selects the element with id="idname" |
| Attribute | [attribute] | Selects all elements with the specified attribute |
Combinators
| Selector | Example | Description |
|---|---|---|
| Descendant | div p | Selects all <p> elements inside <div> elements |
| Child | div > p | Selects all <p> elements where the parent is a <div> element |
| Adjacent Sibling | div + p | Selects the first <p> element that is placed immediately after <div> elements |
| General Sibling | div ~ p | Selects all <p> elements that are siblings of <div> elements |
Pseudo-classes
| Selector | Example | Description |
|---|---|---|
| :hover | a:hover | Selects links on mouse over |
| :active | a:active | Selects the active link |
| :focus | input:focus | Selects the input element which has focus |
| :first-child | p:first-child | Selects every <p> element that is the first child of its parent |
| :last-child | p:last-child | Selects every <p> element that is the last child of its parent |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
Pseudo-elements
| Selector | Example | Description |
|---|---|---|
| ::before | p::before | Insert content before every <p> element |
| ::after | p::after | Insert content after every <p> element |
| ::first-letter | p::first-letter | Selects the first letter of every <p> element |
| ::first-line | p::first-line | Selects the first line of every <p> element |
Attribute Selectors
| Selector | Example | Description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute="value"] | [target="_blank"] | Selects all elements with target="_blank" |
| [attribute~="value"] | [title~="flower"] | Selects all elements with a title attribute containing the word "flower" |
| [attribute^="value"] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$="value"] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*="value"] | a[href*="example"] | Selects every <a> element whose href attribute value contains the substring "example" |
Combining Selectors
| Selector | Example | Description |
|---|---|---|
| Multiple Selectors | div, p | Selects all <div> elements and all <p> elements |
| Chaining Selectors | div.classname | Selects all <div> elements with class="classname" |
Not Selector
| Selector | Example | Description |
|---|---|---|
| :not(selector) | p:not(.intro) | Selects all <p> elements that do not have class="intro" |
Advanced Selectors
| Selector | Example | Description |
|---|---|---|
| ::slotted() | ::slotted(p) | Selects any <p> element placed inside a slot (used in Shadow DOM) |
| :host | :host | Selects the shadow host element (the element to which the shadow DOM is attached) |
| :host() | :host(.special) | Selects the shadow host if it matches the selector in parentheses |
| :host-context() | :host-context(h1) | Selects the shadow host if it or any of its ancestors matches the selector |
| ::part() | ::part(foo) | Selects elements with a matching part attribute within a shadow tree |
| :is() | :is(header, main, footer) p | Selects any <p> elements inside <header>, <main>, or <footer> |
| :where() | :where(header, main, footer) p | Similar to :is(), but with 0 specificity |
| :has() | div:has(> img) | Selects <div> elements that contain at least one <img> child |
| :focus-within | form:focus-within | Selects a <form> if it or any of its descendants have focus |
| :placeholder-shown | input:placeholder-shown | Selects <input> elements that are currently showing placeholder text |
| :fullscreen | :fullscreen | Selects the element that's currently in fullscreen mode |
| :dir() | :dir(rtl) | Selects elements based on their directionality (ltr or rtl) |
| :lang() | :lang(fr) | Selects elements based on their language |
| :root | :root | Selects the document's root element (usually <html>) |
| :empty | p:empty | Selects <p> elements that have no children (including text nodes) |
| :target | #section1:target | Selects the element with id="section1" if it's the current target element |
| :checked | input:checked | Selects all checked <input> elements |
| :indeterminate | input:indeterminate | Selects <input> elements that are in an indeterminate state |
| :valid | input:valid | Selects all <input> elements with a valid value |
| :invalid | input:invalid | Selects all <input> elements with an invalid value |
| :optional | input:optional | Selects <input> elements with no "required" attribute |
| :required | input:required | Selects <input> elements with the "required" attribute specified |
| :read-only | input:read-only | Selects <input> elements with the "readonly" attribute specified |
| :read-write | input:read-write | Selects <input> elements that are not read-only |
| :in-range | input:in-range | Selects <input> elements with a value within the specified range |
| :out-of-range | input:out-of-range | Selects <input> elements with a value outside the specified range |