CSS comes with a wide variety of pseudo-classes that allow us to target elements based on their state, structure, and user interaction. Below is a categorized summary of commonly used pseudo-classes, complete with brief descriptions and learning priority levels (based on my personal opinion).
👁️ Element Display State Pseudo-classes
These pseudo-classes target elements based on their display state.
| Pseudo-class | Description | Priority |
|---|---|---|
| :fullscreen | Targets elements in fullscreen mode | ⭐⭐ |
| :modal | Targets an open <dialog> element displayed as a modal |
⭐⭐⭐⭐ |
| :picture-in-picture | Targets <video> elements in picture-in-picture mode |
⭐ |
| :open | Targets open elements like <details>
|
⭐⭐⭐ |
| :popover-open | Targets an element currently open as a popover | ⭐⭐⭐⭐ |
⌨️ Input Pseudo-classes
Used to target input elements based on their state, validation, and user interaction.
| Pseudo-class | Description | Priority |
|---|---|---|
| :autofill | Targets form fields filled in automatically by the browser | ⭐ |
| :enabled | Targets input elements that are enabled | ⭐⭐ |
| :disabled | Targets input elements that are disabled | ⭐⭐⭐ |
| :read-only | Targets input elements that are read-only | ⭐⭐ |
| :placeholder-shown | Targets input elements that show placeholder text | ⭐⭐⭐ |
| :default | Targets default form elements (like a default button) | ⭐ |
| :checked | Targets selected checkboxes or radio buttons | ⭐⭐⭐⭐⭐ |
| :blank | Targets completely empty input fields | ⭐ |
| :valid | Targets inputs that pass HTML5 validation | ⭐⭐ |
| :user-valid | Targets valid inputs after user interaction | ⭐⭐⭐ |
| :invalid | Targets inputs that fail HTML5 validation | ⭐⭐ |
| :user-invalid | Targets invalid inputs after user interaction | ⭐⭐⭐ |
| :in-range | Targets inputs with values within a valid range | ⭐ |
| :out-of-range | Targets inputs with values outside the valid range | ⭐ |
| :required | Targets required input fields | ⭐⭐⭐ |
| :optional | Targets optional input fields | ⭐ |
🌍 Location Pseudo-classes
Target links or elements based on the URL or fragment identifier.
| Pseudo-class | Description | Priority |
|---|---|---|
| :any-link | Targets all <a> elements with an href, whether visited or not |
⭐⭐⭐ |
| :link | Targets links that have not been visited | ⭐⭐⭐⭐⭐ |
| :visited | Targets links that have been visited | ⭐⭐⭐⭐⭐ |
| :local-link | Targets links pointing to the same page (internal links) | ⭐ |
| :target | Targets elements that match the URL fragment identifier (e.g., #section) |
⭐⭐⭐ |
🌳 Tree-structural Pseudo-classes
Used to target elements based on DOM structure.
| Pseudo-class | Description | Priority |
|---|---|---|
| :root | Targets the root element of the document (usually <html>)—great for global CSS vars |
⭐⭐⭐⭐⭐ |
| :empty | Targets elements with no children (including text/comments) | ⭐⭐⭐ |
| :first-child | Targets the first child of its parent | ⭐⭐⭐⭐ |
| :first-of-type | Targets the first sibling of its type | ⭐⭐⭐ |
| :last-child | Targets the last child of its parent | ⭐⭐⭐⭐ |
| :last-of-type | Targets the last sibling of its type | ⭐⭐⭐ |
| :nth-child() | Targets elements based on their position among siblings | ⭐⭐⭐⭐⭐ |
| :nth-last-child() | Targets elements from the end based on their position | ⭐⭐⭐⭐ |
| :nth-of-type() | Targets siblings of the same type based on order | ⭐⭐⭐⭐ |
| :nth-last-of-type() | Targets same-type siblings from the end | ⭐⭐⭐ |
| :only-child | Targets elements that are the only child of their parent | ⭐⭐⭐⭐⭐ |
| :only-of-type | Targets elements that are the only one of their type among siblings | ⭐⭐ |
🖱️ User Action Pseudo-classes
These target elements based on user interaction like hovering, clicking, or focusing.
| Pseudo-class | Description | Priority |
|---|---|---|
| :hover | Targets elements when hovered | ⭐⭐⭐⭐⭐ |
| :active | Targets elements during active state (click or tap) | ⭐⭐⭐⭐⭐ |
| :focus | Targets elements receiving focus | ⭐⭐⭐⭐⭐ |
| :focus-visible | Focus styles shown only when navigating with keyboard/tab | ⭐⭐⭐⭐ |
| :focus-within | Targets an element that contains a focused child element | ⭐⭐⭐ |
🧩 Functional Pseudo-classes
These pseudo-classes use parentheses () to create more dynamic and flexible selectors.
| Pseudo-class | Description | Priority |
|---|---|---|
| :is() | Simplifies writing complex selectors. Great for targeting multiple elements at once | ⭐⭐⭐⭐⭐ |
| :where() | Like :is(), but doesn’t add specificity. Perfect for resets or default styling |
⭐⭐⭐⭐ |
| :has() | A powerful parent selector that targets elements based on their children or content | ⭐⭐⭐⭐⭐ |
| :not() | Excludes elements that match a certain selector | ⭐⭐⭐⭐⭐ |
These four pseudo-classes are powerful and highly recommended for writing expressive and maintainable CSS selectors.
Disclaimer: The priority ratings above are entirely based on my personal opinion. Feel free to adjust based on your own needs and experience.
If you found this cheat sheet helpful, feel free to 💖 save it, 🗨️ leave a comment, or 🔁 share it with other web developers!
See you in the next post 👋
Top comments (0)