CSS Selectors Cheatsheet

THE PRACTICAL GUIDE · NORMANDIN SYSTEMS

Get more from CSS Selectors Cheatsheet

CSS Selectors Cheatsheet summarizes patterns for targeting elements by tag, class, id, attributes, and relationships. A selector's match depends on the document structure, while specificity and the cascade determine which declarations take effect. Matching the intended element is therefore only one part of understanding why a particular style is visible. A cheatsheet works best as a memory aid while you practice a concrete task. Read the command or syntax together with its arguments, placeholders, and surrounding context. Similar-looking options can have very different meanings, and an example written for one platform or version may need adjustment elsewhere. Keep the reference beside a small test case, use read-only examples first when possible, and check the relevant help output before applying an unfamiliar command to valuable files or a running service.

Guide updated October 13, 2026

How to use this tool

1. Identify the operation you want to perform and find the matching section of the reference. Read the whole example before copying any part of it.
2. Find the needed relationship or attribute pattern and test it against a small HTML structure.
3. Review the example below and compare its expected behavior with a small sample of your own input before continuing.
4. Try the adapted example on a small test case, compare the result with the explanation, and save the command with a note about the context in which it works.

SEE IT IN PRACTICE

A worked example

.card > h2

h2 elements that are direct children of an element with class card

The child combinator excludes headings nested deeper inside another descendant element.

Matching and winning the cascade are separate

A selector can correctly match an element while its declarations are overridden by another rule. Inspect both the matching selector and the computed style when diagnosing a problem. Specificity, source order, inheritance, and other cascade mechanisms influence the final value. Avoid escalating selector complexity blindly; first find the rule that is actually winning. A precise, understandable selector is easier to maintain than one with unnecessary ids or repeated classes added only to overpower another declaration.

Document relationships shape selectors

The descendant combinator can match at any nested depth, while the child combinator requires a direct relationship. Adjacent and general sibling relationships also have different scope. Test a small document containing both intended and unintended matches so the distinction is visible. Dynamic pseudo-classes depend on state, and newer selector features depend on browser support. If markup changes frequently, prefer selectors based on stable component structure or intentional classes rather than fragile positions in a long chain.

When this tool is useful

• Choose a precise styling selector
• Understand element relationships
• Review why a CSS rule matches too broadly

Tips for a better result

• Inspect both matching elements and computed styles, and compare direct-child versus descendant selection when results are unexpected.
• Replace example paths, identifiers, and names deliberately. Copying a reference command unchanged can target a different file, branch, service, or environment from the one you intended.
• Keep the source and the settings used for this result together. That makes a later comparison or correction easier, especially when another person needs to reproduce the same outcome.

Frequently asked questions