CSS is deceptive. The syntax is simple — a selector, a property, a value — but the selector system is surprisingly deep. Most developers know the basics: type selectors, class selectors, ID selectors, and the descendant combinator. But real-world stylesheets demand more. You need to style links differently based on whether they are external or internal. You need to highlight form fields that are invalid without JavaScript. You need to select every third item in a grid, but only if it is not the last row. You need to style a parent element based on what children it contains. You need to understand why your carefully crafted override is being ignored by the cascade. These are not edge cases. They are the daily reality of writing maintainable CSS. That is why we built the free interactive CSS Advanced Selectors Cheat Sheet.
Our cheat sheet covers the selectors and concepts that separate CSS beginners from CSS power users. It targets the patterns developers actually search for: css selectors cheat sheet, css pseudo elements, css pseudo classes, css attribute selectors, css combinators, css nth child, css not selector, css is selector, css where selector, css has selector, css focus within, css focus visible, css placeholder shown, css checked selector, css target selector, css empty selector, css only child, css first of type, css last of type, css nth of type, css odd even, css specificity, css cascade, css inheritance, css descendant selector, css child selector, css adjacent sibling, and css general sibling. Every entry includes a realistic code example, a concise explanation, and one-click copy. The design follows The Magnifying Glass Collector's Cabinet aesthetic — deep archival green background, brass and steel accents, floating dust-mote particles, and category-colored left borders on every card. 100% client-side.
Skip ahead: If you want to explore the tool while reading, open the CSS Advanced Selectors Cheat Sheet in another tab.
Basic Selectors: The Foundation
Every CSS rule starts with a selector. The basic selectors — universal, type, class, ID, and grouping — are the primitives from which all complex selectors are built.
The Universal Selector
The * universal selector matches every element in the document. It is most commonly used for CSS resets:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Be careful: * has zero specificity but can impact performance on very large documents because it applies to every single element.
Type, Class, and ID Selectors
Type selectors target elements by tag name. Class selectors target elements with a specific class attribute. ID selectors target a single element with a matching ID. Specificity increases from type (0,0,1) to class (0,1,0) to ID (1,0,0).
p { line-height: 1.6; } /* type: (0,0,1) */
.button { padding: 8px 16px; } /* class: (0,1,0) */
#header { position: sticky; } /* ID: (1,0,0) */Chaining classes (.btn.primary) matches elements that have all specified classes. This is more specific than a single class but less specific than an ID.
Combinators: Relationships Between Elements
Combinators express structural relationships. They are the whitespace, greater-than sign, plus sign, and tilde that sit between simple selectors.
Descendant and Child Combinators
The descendant combinator (a single space) matches elements at any depth. The child combinator (>) matches only direct children.
nav a { } /* any <a> inside <nav>, at any depth */
ul > li { } /* only <li> that are direct children of <ul> */Child combinators are more performant because the browser only needs to check one level of the DOM tree. They also make your stylesheets more robust against nested component structures.
Sibling Combinators
The adjacent sibling combinator (+) matches an element immediately preceded by another. The general sibling combinator (~) matches any following sibling.
h2 + p { margin-top: 0; } /* <p> immediately after <h2> */
input:focus ~ label { color: blue; } /* any <label> sibling after focused input */These are indispensable for form styling, where the visual state of a label often depends on the state of its associated input.
Attribute Selectors: Precision Matching
Attribute selectors match elements based on the presence or value of HTML attributes. They are far more powerful than most developers realize.
Presence and Exact Match
[disabled] { opacity: 0.5; } /* has the attribute */
input[type="text"] { border: 1px solid #ccc; } /* exact value */Substring Matching
The ^=, $=, and *= operators match the beginning, end, and any substring of an attribute value:
a[href^="https"] { } /* starts with https */
a[href$=".pdf"] { } /* ends with .pdf */
[class*="col-"] { } /* contains col- anywhere */These are ideal for styling external links, file-type icons, and grid systems without adding extra classes.
Case-Insensitive Matching
The i flag makes attribute matching case-insensitive:
a[href*="devtoolkit" i] { font-weight: bold; }This is especially useful for matching class names or URLs where casing may vary.
Pseudo-Classes: State and Interaction
Pseudo-classes select elements based on their state, position, or dynamic conditions. They are the bridge between CSS and user interaction.
Link and User-Action Pseudo-Classes
a:link { color: blue; } /* unvisited links */
a:visited { color: purple; } /* visited links */
button:hover { background: #0056b3; } /* mouse over */
button:active { transform: scale(0.98); } /* being clicked */The :visited pseudo-class has privacy restrictions: only color, background-color, border-color, and a few other properties can be styled.
Focus Management
Modern CSS provides three focus-related pseudo-classes:
input:focus { outline: 2px solid blue; } /* any focus */
button:focus-visible { outline: 3px solid blue; } /* keyboard focus only */
.form-group:focus-within { border-color: blue; } /* element or descendant focused */:focus-visible is critical for accessibility. It shows focus rings for keyboard users while hiding them for mouse clicks, eliminating the common developer temptation to remove focus outlines entirely.
Location and Structural States
section:target { background: #fffde7; } /* URL fragment matches ID */
p:empty { display: none; } /* no content, not even whitespace */Structural Pseudo-Classes: Position-Based Selection
Structural pseudo-classes select elements based on their position among siblings. They are the most powerful tool for list and grid styling without adding utility classes.
Child Positioning
li:first-child { margin-top: 0; }
li:last-child { border-bottom: none; }
tr:nth-child(even) { background: #f8f9fa; }
li:nth-child(3n+1) { clear: left; }The :nth-child(An+B) syntax accepts the keywords even, odd, or an algebraic expression. -n+3 selects the first three items. n+4 selects all items from the fourth onward.
Type-Based Positioning
:first-of-type, :last-of-type, and :nth-of-type count only elements of the same type:
p:first-of-type { font-size: 1.2rem; } /* first <p> among siblings */
img:only-of-type { display: block; margin: 0 auto; }Advanced :nth-child with Selector Filters
Modern browsers support filtering the sibling list before counting:
li:nth-child(odd of .active) { background: #e3f2fd; }This selects odd-positioned items from the subset of li elements that also have the class active.
Form Pseudo-Classes: Validation and State
Form pseudo-classes let you style form controls based on their validation state without JavaScript.
Checked, Valid, and Invalid
input[type="checkbox"]:checked + label {
text-decoration: line-through;
}
input:valid { border-color: #28a745; }
input:invalid { border-color: #dc3545; }Range and Placeholder
input:in-range { border-color: green; }
input:out-of-range { border-color: red; }
input:placeholder-shown { font-style: italic; }:placeholder-shown is distinct from ::placeholder. The former is a pseudo-class that matches the input element itself when it is displaying placeholder text. The latter is a pseudo-element that styles the placeholder text node.
Logical and Relational Pseudo-Classes
The logical pseudo-classes — :is, :where, :has, and :not — are the most powerful additions to CSS selectors in the past decade.
:is() — Matching Any Selector
:is() reduces selector duplication and accepts complex selectors. Its specificity equals the most specific argument:
:is(h1, h2, h3) a { color: blue; } /* specificity = (0,0,2) */:where() — Zero-Specificity Matching
:where() behaves like :is() but with zero specificity. This makes it perfect for reset and base styles that should be easily overridden:
:where(h1, h2, h3) { margin-top: 1.5em; } /* specificity = 0 */:has() — The Parent Selector
:has() finally gives CSS a parent selector. It matches an element if it contains descendants matching the inner selector:
article:has(img) {
display: grid;
grid-template-columns: 1fr 1fr;
}
h2:has(+ .subtitle) {
margin-bottom: 0.25rem;
}:not() — Negation
:not() excludes elements matching the inner selector. In modern CSS it accepts complex selector lists:
button:not(:disabled) { cursor: pointer; }
:not(.sidebar) p { max-width: 65ch; }Pseudo-Elements: Virtual Content
Pseudo-elements create virtual elements that do not exist in the DOM. They use double colons in modern CSS.
::before and ::after
These are the most commonly used pseudo-elements. They require the content property:
.quote::before {
content: "\201C";
font-size: 3rem;
color: #ccc;
}
a[href^="http"]::after {
content: "\2197";
font-size: 0.75em;
}Text and Selection Pseudo-Elements
p::first-letter { font-size: 3rem; float: left; }
p::first-line { font-weight: 600; text-transform: uppercase; }
::selection { background: #007bff; color: white; }Modern Pseudo-Elements
li::marker { color: #007bff; font-size: 1.2rem; }
dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
input::file-selector-button {
padding: 8px 16px;
background: #007bff;
color: white;
border: none;
}Specificity and the Cascade
Understanding specificity is essential for debugging CSS. It is calculated as a tuple (a, b, c):
- a = ID selectors
- b = class selectors, attribute selectors, pseudo-classes
- c = type selectors, pseudo-elements
#nav .menu li a { } /* (1,1,2) */
.menu li a { } /* (0,1,2) — loses to above */Inline Styles and !important
Inline styles have specificity (1,0,0,0). The !important flag overrides everything except another !important in a higher cascade layer:
@layer reset, base, components, utilities;
@layer utilities {
.btn { padding: 12px !important; }
}:where(), :is(), :has(), and :not() Specificity
:where(#id, .class) { } /* specificity = 0 */
:is(#id, .class) { } /* specificity = (1,0,0) */
:has(.highlight) { } /* specificity = (0,1,0) */
:not(#excluded) { } /* specificity = (1,0,0) */Related Tools
- CSS Properties Cheat Sheet — 120+ CSS properties across 8 categories with visual examples and one-click copy.
- CSS Grid & Flexbox Cheat Sheet — Interactive reference for modern CSS layout with grid templates, flex properties, and alignment patterns.
- CSS Animation Properties Cheat Sheet — @keyframes, transitions, transforms, timing functions, and performance best practices.
- JavaScript DOM Methods Cheat Sheet — querySelector, querySelectorAll, classList, events, and advanced DOM APIs.
Frequently Asked Questions
Is this CSS Advanced Selectors Cheat Sheet free?
Yes. The tool is completely free with no limits, no registration, and no advertisements.
How many entries are included?
The cheat sheet contains over 65 entries across 9 categories, covering basic selectors, combinators, attribute selectors, pseudo-classes, pseudo-elements, structural selectors, form selectors, logical selectors, and specificity.
Can I search for specific selectors?
Yes. The search bar filters entries in real time by selector name, description, or example content.
Is my data safe?
Yes. The cheat sheet is 100% client-side. No usage data is sent to a server.
Does this replace MDN or the CSS specification?
No. This cheat sheet is a quick reference for selector syntax and common patterns. For deep understanding of CSS internals, edge cases, and browser quirks, consult MDN Web Docs and the W3C CSS Specifications.
Conclusion
CSS selectors are the precision instruments of web styling. The patterns in this article — css combinators, css attribute selectors, css structural pseudo-classes, css form pseudo-classes, css logical pseudo-classes like :is, :where, :has, and :not, and the fundamentals of css specificity and css cascade — are what separate casual CSS users from developers who can write robust, maintainable stylesheets. Our free interactive CSS Advanced Selectors Cheat Sheet puts all of them at your fingertips. With category filtering, real-time search, one-click copy, and a distinctive archival aesthetic, it is the fastest way to find the exact selector you need without leaving your flow. Bookmark it, share it with your team, and keep building.