Visual guide to CSS selectors, including pseudo-classes (:nth-child, :hover,...), functional pseudo-classes (:not, :is,...) and pseudo-elements.
Pseudo-classes - CSS | MDN
A CSS pseudo-class is a keyword added to a selector that lets you select elements based on information that lies outside of the document tree, such as a specific state of the selected element(s). For example, the pseudo-class :hover can be used to style a button when a user's pointer hovers over it.
CSS selectors - CSS | MDN
The CSS selectors module defines the patterns to select elements to which a set of CSS rules are then applied along with their specificity. The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.
The CSS Selection - 2026 Edition - Project Wallace
The CSS Selection shows real-world CSS usage from over 100,000 websites and looks at the most important metrics.
CSS :has() | 12 Days of Web
Learn the ins and outs of `:has()` which is the new CSS relational selector for selecting parents, siblings, and other unique combinations.
7 CSS Tricks That Actually Have Good Browser Support
12 CSS features you can use today with no build step
Modern CSS features that replace Sass, PostCSS plugins and JavaScript hacks: nesting, :has(), container queries, subgrid and more, checked in September 2026.
CSS Color Spaces and Relative Color Syntax | 12 Days of Web
Learn how to define color palettes that are perceptually uniform using the new Oklch color space and the relative color syntax in CSS.
Glen Maddern: Internet Pro
Let me tell you about what CSS Modules is, and why it’s the future.
Modern CSS snippets. Every old hack, replaced.
Side-by-side comparisons of outdated CSS techniques and their modern native replacements. Grid, custom properties, nesting, container queries, and more.
Modern CSS snippets. Every old hack, replaced.
Side-by-side comparisons of outdated CSS techniques and their modern native replacements. Grid, custom properties, nesting, container queries, and more.
element() CSS function - CSS | MDN
The element() CSS function defines an <image> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.
@function — Native Custom Functions in CSS
CSS now has user-defined functions. No preprocessor, no JavaScript, but native @function with typed parameters, local variables, and conditional logic built right into your CSS.
The State of CSS 2020: Conclusion
The annual survey about the latest trends in CSS.
CSS Anchor Positioning Guide | CSS-Tricks
Learn about CSS Anchor Positioning, including its syntax, properties, how it is used to position one element next to another, and even how it's used to resize elements relative to other elements.
