About the CSS Selector Cheat Sheet
A selector is the part of a CSS rule that decides which elements the declarations reach, and this sheet lists what the modern web platform supports, grouped by the job each form does. The tables cover the basic forms, the four combinators, all nine attribute matchers with their case sensitivity flags, structural and state pseudo-classes, the functional group built around :is(), :where(), :not() and :has(), and the pseudo-elements from ::before through ::part().
Each row pairs the syntax with a plain description and a working example you can drop straight into a stylesheet, so the reference doubles as a snippet library. The last table treats specificity as the triple of ids, classes and element names, and spells out the two rules that catch people: :where() contributes nothing at all, while :is() and :not() inherit the weight of their heaviest argument. Cascade layers are compared before specificity, so a rule in a later @layer beats a heavier selector declared in an earlier one.
Use the section dropdown to narrow things to one topic, or type in the filter box to surface every row that mentions nth, focus or attribute. Copy hands you a Markdown twin of whatever is on screen, ready for notes or a pull request. When you want to tidy the stylesheet those selectors live in, the CSS Beautifier and CSS Validator take over from here.
How to use
- Pick a topic in the Section dropdown, or leave it on All sections to read the whole reference.
- Type a word such as nth or attribute in the filter box to keep only the matching rows.
- Press Copy for a Markdown version, or Download to save it as a .md file.
Common questions
- What is the difference between :is() and :where()?
- They group selectors in exactly the same way, but :where() always counts as zero specificity while :is() takes the specificity of its most specific argument.
- Is there a parent selector in CSS?
- :has() is the parent selector. Writing article:has(img) styles the article rather than the image, and it works in every current browser.
- How is CSS specificity calculated?
- Count ids first, then classes together with attribute selectors and pseudo-classes, then element names and pseudo-elements. Compare those three numbers from left to right.
- Why does my :nth-child rule skip elements?
- :nth-child counts every element sibling, not only the ones matching the rest of the selector. Reach for :nth-of-type, or :nth-child(An+B of S), when you need to count a subset.
- Do pseudo-elements take one colon or two?
- Two colons is the correct modern form. Browsers still accept a single colon for ::before, ::after, ::first-line and ::first-letter so that old stylesheets keep working.