Ultimate CSS Selectors Reference Guide
Explore this comprehensive and up-to-date CSS reference tutorial featuring a full list of selectors essential for building modern, responsive, and visually appealing websites. This guide includes both basic and advanced selectors used across the CSS and CSS3 specification, making it a valuable resource for developers of all levels.
Alphabetically Organized CSS Selectors List
Browse the full collection of CSS selectors, neatly categorized in alphabetical order for quick and easy access. Each entry includes a clear explanation and practical example to help you understand how and when to use each selector in real-world scenarios.
Alphabetical Reference
| Selector | Description |
| * | This selects and styles every element. |
| + | Selects element immediately after another one. |
| > | Selects direct child of an element. |
| || | Targets elements within column layout children. |
| ~ | Selects siblings after specific element match. |
| :active | Styles element when it's being activated. |
| ::after | Inserts content after selected element. |
| :any-link | Selects all unvisited and visited links. |
| [attribute] | Selects elements with given attribute present. |
| [attribute=value] | Targets attribute with specific exact value. |
| [attribute~=value] | Matches word in space-separated attribute value. |
| [attribute|=value] | Matches attribute starting with specific prefix. |
| [attribute^=value] | Selects elements where attribute starts with. |
| [attribute$=value] | Selects elements where attribute ends with. |
| [attribute*=value] | Matches attribute containing specific substring. |
| :autofill | Targets inputs with autofill browser data. |
| ::backdrop | Styles backdrop layer of modal dialog. |
| ::before | Inserts content before selected element. |
| :blank | Targets empty elements with no content. |
| :checked | Selects checked checkboxes or radio inputs. |
| .class | Selects elements by specific class name. |
| .class1.class2 | Targets elements with both class names. |
| .class1 .class2 | Selects nested element with given class. |
| ::cue | Targets subtitles and cues in video. |
| :current or :current() | Selects element currently in view context. |
| :default | Matches the default form input element. |
| :dir() | Selects elements with text directionality. |
| :disabled | Targets disabled input form elements only. |
| element | Selects all elements of given type. |
| element.class | Selects elements of type with class. |
| element,element | Selects multiple element types together. |
| element element | Selects descendants inside specific elements. |
| :empty | Selects elements with no child nodes. |
| :enabled | Targets enabled form input elements only. |
| :first-child | Selects element that’s first child only. |
| ::first-letter | Styles the first letter of element. |
| ::first-line | Styles the first line of text. |
| :first-of-type | Targets first element of its type. |
| :focus | Selects element currently in input focus. |
| :focus-visible | Targets focused element visible to user. |
| :focus-within | Selects element with focused inner child. |
| :fullscreen | Targets element in fullscreen display mode. |
| :future | Selects elements after current active time. |
| :has() | Selects element containing another element. |
| :hover | Targets element while being hovered over. |
| #id | Selects element by specific ID name. |
| :in-range | Selects inputs with valid range value. |
| :indeterminate | Targets form inputs in indeterminate state. |
| :invalid | Selects inputs with invalid entered values. |
| :is() | Matches any element from group list. |
| :lang(language) | Selects elements with specified language tag. |
| :last-child | Selects element that’s last child only. |
| :last-of-type | Selects last element of specific type. |
| :link | Selects all unvisited anchor links. |
| :local-link | Targets links within same document only. |
| :matches() | Matches element against listed selectors. |
| ::marker | Targets bullet or number in lists. |
| :not(selector) | Excludes elements matching given selector. |
| :nth-child(n) | Selects element by its child position. |
| :nth-last-child(n) | Selects nth child from the end. |
| :nth-last-of-type(n) | Selects nth of type from end. |
| :nth-of-type(n) | Selects nth element of specific type. |
| :only-of-type | Selects element that's sole of type. |
| :only-child | Matches element with no siblings. |
| :optional | Selects input not marked required. |
| :out-of-range | Targets inputs outside allowed range. |
| :past | Selects elements before current timeline. |
| ::placeholder | Styles placeholder text in inputs. |
| :placeholder-shown | Selects input when placeholder is visible. |
| :read-only | Targets input elements marked read-only. |
| :read-write | Selects editable input or textarea fields. |
| :required | Targets inputs with required attribute set. |
| :root | Selects the root element of document. |
| :scope | Targets elements in current scope only. |
| ::selection | Styles text selected by the user. |
| :target | Targets active anchor-linked element only. |
| :valid | Selects inputs with valid entered data. |
| :visited | Targets links previously visited by user. |
| :where() | Matches any selector with zero specificity. |