CSS Selectors Visual Guide
What is the CSS Selectors Visual Guide?
A visual guide to the most popular CSS selectors. CSS selectors are patterns used to select and style HTML elements. The guide covers traditional selectors plus pseudo-classes (single colon: :hover, :first-child—styles based on state or relation) and pseudo-elements (double colon: ::before, ::first-line—styles for parts of an element). Each selector includes code examples and visual demos. Reference for developers learning or reviewing CSS.
What the Guide Covers
Popular CSS selectors with examples.
Universal (*), element, .class, #id. Multiple classes, comma combinator.
Descendant (space), adjacent (+), child (>), general sibling (~). Lobotomized owl.
[attr], [attr=val], [attr~=val], [attr*=val], [attr^=val], [attr$=val].
:link, :visited, :hover, :active, :focus, :checked, :disabled, :valid, :first-child, :nth-child, :target, :not(), :has().
::before, ::after, ::first-letter, ::first-line, ::placeholder, ::selection, ::marker.
Each selector has code snippets and live visual examples.
How To Use the Guide
Reference the guide in three ways.
Scroll or navigate. Find the selector you need.
Each selector has CSS snippets and visual demos.
Adapt the code for your project.
Tips for CSS Selectors
Get the most out of the guide.
: for state/relation. :: for parts of element.
Parent selector. Style element if it contains a match.
Exclusion filter. Target elements that do not match.
Great For Developers
Who benefits from the guide?
Quick reference. Selector patterns.
Learn selectors with visual examples.
Understand how CSS targets elements.
Shared reference. Consistent patterns.
Why Use a CSS Selectors Guide?
Visual reference for selector patterns.
See each selector in action.
Basic, combinators, attributes, pseudo.
Code snippets. Copy and adapt.
Reference anytime. No account.
Technical Details
About the guide.
Basic selectors, combinators, attribute selectors, pseudo-classes, pseudo-elements.
Each selector: name, description, CSS example, visual demo.
SVG reference, color picker, color palette generator.
Frequently Asked Questions
Have questions? We have answers.