Summarize this article with:
Your stylesheet means nothing without selectors that actually hit their targets.
CSS select examples show you exactly how to target any element on a page, from basic tags to complex nested structures.
Selectors control everything. Specificity, cascade behavior, DOM targeting, style inheritance.
Get them wrong and you spend hours debugging why your styles refuse to apply.
This guide covers the full selector spectrum: element, class, ID, attribute, pseudo-class, pseudo-element, and combinator patterns.
You’ll learn specificity calculation, browser rendering behavior, and the exact syntax for each selector type.
Real code examples included. Copy them, test them, adapt them to your projects.
What is a CSS Selector
A CSS selector is a pattern that targets HTML elements for styling.
It tells the browser which elements receive specific style declarations.
Without selectors, you cannot apply any CSS rules to your webpage.
The selector sits at the beginning of every CSS rule, followed by curly braces containing property-value pairs.
Browsers read these patterns and match them against the DOM tree structure.
When a match occurs, the browser applies the associated styles to that element.
Modern selector syntax follows W3C specifications, currently at Selectors Level 4.
Every frontend developer needs selector fluency.
It forms the foundation of all visual styling work.
CSS Select Examples To Check Out
Arrow Styling with CSS Select
See the Pen
SELECT right-arrow with CSS by Veiko (@vkjgr)
on CodePen.
Pure CSS, No JS? Check This Out!
Modernly Styling with Pure CSS Select
The Dynamic Duo: CSS & JS
Branding with CSS3 Card Deck Drop
Multitasking with Chosen Multi-Select
Purely CSS. Utterly Stunning.
Vivid Dreams of a Full Height Select Box
Dropdowns that Don’t Suck. Period.
Behold the Selectionator
When Regular Just Doesn’t Cut It
Add Some Color with a CSS Select Twist
Boost Your Display Game
Select. Share. Shine.
Fully Stylized. Fully CSS.
Turn Radio Inputs into Cool Select Boxes
Feedback Ready with the CSS Review Select
Maps + Select Box = Pure Gold
The All-in-One CSS Select Box
A Dash of CSS Select Style
Select? Make it Horizontal!
Visual Treat with Image Selection
Hover and Adore this CSS Select
Smooth Scroll with a Responsive Touch
Keep it Flat and Fab
PTransformative Select Box with a Placeholder
Select in Material Design Vibes
Select-Boxes that Turn Heads
Raw CSS Magic: Custom Styled Select
Pure, No Frills CSS Select Dropdown
Into the Shadows: Dark & Light Selects
Keeping it Straightforward with HTML & CSS
Turn Heads with this Pretty Select Dropdown
Filterable and Stylish CSS Select Dropdown
Box of Wonders with Only CSS
Tailored to Perfection: CSS Only Dropdown
How CSS Selectors Work
The browser parses your stylesheet from top to bottom.
For each rule, it evaluates the selector against every element in the document.
Selector matching happens right-to-left, not left-to-right as most assume.
This means div p span first finds all spans, then checks if they have paragraph ancestors inside divs.
The cascade determines which styles win when multiple rules target the same element.
Three factors control this: specificity weight, source order, and importance declarations.
Specificity calculation assigns numeric values to different selector types.
ID selectors carry more weight than class selectors, which outweigh element selectors.
When specificity ties, the last rule in source order wins.
Style inheritance passes certain properties from parent to child elements automatically.
Color and font properties inherit. Margins and padding do not.
Chrome DevTools and Firefox Developer Tools let you inspect which selectors apply to any element.
Types of CSS Selectors
CSS offers multiple selector categories, each with distinct targeting capabilities.
Choosing the right type affects both specificity and selector performance.
Element Selectors
Target HTML tags directly by name.
Syntax: p, div, span, article.
Lowest specificity weight (0,0,1). Apply site-wide base styles with these.
Class Selectors
Class selector syntax uses a period prefix: .button, .card, .active.
Specificity weight: (0,1,0).
One element can have multiple classes. One class can apply to unlimited elements.
BEM methodology and OOCSS rely heavily on class-based targeting.
ID Selectors
Target unique elements with the hash prefix: #header, #main-nav, #footer.
Specificity weight: (1,0,0). High specificity makes overrides difficult.
Use sparingly. Most style guides recommend classes over IDs for styling.
Attribute Selectors
Attribute selector brackets target elements by their HTML attributes.
Basic syntax: [type="text"], [href], [data-active="true"].
Partial matching options:
[attr^="val"]starts with[attr$="val"]ends with[attr="val"]contains[attr~="val"]word match
Data attribute targeting works perfectly for JavaScript-driven state styling.
Pseudo-class Selectors
Target elements based on state or position.
State-based: :hover, :focus, :active, :visited, :checked, :disabled.
Structural pseudo-classes handle position: :first-child, :last-child, :nth-child(), :nth-of-type().
The nth-child function accepts formulas like 2n+1 for odd items or 3n for every third.
Negation with :not() excludes elements from selection.
Pseudo-element Selectors
Target parts of elements or generate content.
Use double colons per CSS3 spec: ::before, ::after, ::first-line, ::first-letter.
The ::before and ::after pseudo-elements require the content property to display.
First-letter styling creates drop cap effects. First-line targets only the initial text line.
Selection highlight color changes with ::selection.
Combinator Selectors
Combinators define relationships between elements.
- Descendant (space):
div ptargets any p inside div - Child combinator (>):
ul > litargets direct children only - Adjacent sibling (+):
h2 + ptargets immediately following sibling - General sibling (~):
h2 ~ ptargets all following siblings
The child combinator arrow provides tighter control than descendant selectors.
CSS Selector Specificity
Specificity calculation determines which styles apply when rules conflict.
The browser assigns a three-part value to each selector.
Format: (ID count, class count, element count).
Examples:
p= (0,0,1).intro= (0,1,0)#header= (1,0,0)#nav .item a= (1,1,1)div.card p.text= (0,2,2)
Higher values win. Compare left to right.
Inline styles override all selectors. The !important declaration overrides inline styles.
Avoid specificity wars. Keep selectors as flat as possible.
SASS and LESS preprocessors make deep nesting tempting. Resist it.
CSS Selector Performance
Browser rendering starts with selector evaluation.
Complex selectors slow down page paint, especially on large DOM trees.
Right-to-left matching means the rightmost part (key selector) matters most.
Slow key selectors: (universal), bare element tags, deeply nested descendants.
Fast key selectors: IDs, classes, attribute selectors with specific values.
The universal selector asterisk forces evaluation against every single element.
Keep selector depth under three levels when possible.
Can I Use (caniuse.com) reports browser support for newer selector features.
Cross-browser compatibility testing catches selector issues early.
Stylelint and CSS Lint flag potentially slow selectors during development.
Common CSS Selector Patterns
Real projects demand selector combinations, not isolated rules.
These patterns solve recurring styling challenges across websites.
Form Styling Patterns
Target input types with input[type="text"], input[type="email"], input[type="password"].
Style disabled form elements with :disabled, checked inputs with :checked.
Placeholder text styling uses ::placeholder for color and font adjustments.
Focus state forms need clear visual indicators for web accessibility.
Navigation Patterns
Style navigation lists with nav ul > li for direct children only.
Active link styling: .nav-item.active or a[aria-current="page"].
Visited link color changes with :visited, but privacy restrictions limit available properties.
CSS dropdown menus rely on :hover combined with child combinators.
Card and Grid Layouts
Target alternating CSS cards with :nth-child(odd) and :nth-child(even).
Select every third item: :nth-child(3n).
Empty element selector :empty hides cards without content.
The :only-child selector applies special styling when just one card exists.
Typography Patterns
First-letter drop caps: p:first-of-type::first-letter with larger font size and float.
First-line text styling adjusts weight or tracking on the opening line only.
Lang attribute selector :lang(en) targets content by language for accessible typography.
Interactive States
Hover state styling triggers on mouse enter: .button:hover.
Chain states for precision: .button:hover:not(:disabled).
Focus-visible targets keyboard focus without affecting mouse clicks.
Build CSS hover effects with transitions on the base state, not the hover state.
CSS Selector Browser Support
Not all selectors work everywhere.
Legacy browsers, particularly Internet Explorer, lack support for modern pseudo-classes.
Selectors Level 4 features have inconsistent adoption across engines.
Webkit engine (Safari) sometimes lags behind Chrome and Firefox on newer selectors.
Check caniuse.com before using:
:has()parent selector:is()and:where()for grouping:focus-visible::backdrop
Autoprefixer handles vendor prefixes automatically during build.
PostCSS transforms modern selectors into compatible fallbacks.
Test in Safari Web Inspector, Chrome DevTools, and Firefox Developer Tools.
Progressive enhancement: start with broad selectors, layer modern ones for capable browsers.
Media queries can feature-detect selector support with @supports selector().
CSS Selector Errors and How to Fix Them
Selectors fail silently. No console errors, just styles that don’t apply.
Common mistakes and fixes:
Typos and Syntax Errors
Missing dots before class names: button vs .button.
Wrong combinator: space (descendant) vs > (child).
Unclosed attribute brackets: [type="text" breaks the entire rule.
Specificity Conflicts
Styles not applying usually means another rule has higher specificity weight.
Inspect the element in DevTools. Crossed-out declarations lost the specificity battle.
Fix by increasing your selector’s specificity or reducing the competing rule’s weight.
Selector Targeting Wrong Elements
Descendant selectors often match unintended nested elements.
Use child combinator > when you need direct children only.
The :not() selector excludes unwanted matches: .list > li:not(.excluded).
Pseudo-class Order Issues
Link pseudo-classes require LVHA order: :link, :visited, :hover, :active.
Wrong order causes states to override each other incorrectly.
Debugging Tools
Right-click any element, select “Inspect” to view applied selectors.
DevTools shows computed styles with the winning selector for each property.
Stylelint catches errors during development before browser testing.
Visual Studio Code and Sublime Text extensions highlight invalid selector syntax.
CodePen and JSFiddle provide quick isolated testing environments.
FAQ on CSS Select Examples
What is a CSS selector?
A CSS selector is a pattern that identifies which HTML elements receive specific styles. It sits before the declaration block in every CSS rule, telling the browser exactly which DOM elements to target for styling.
What are the main types of CSS selectors?
The main types include element selectors, class selectors, ID selectors, attribute selectors, pseudo-class selectors, pseudo-element selectors, and combinator selectors. Each type offers different targeting precision and carries distinct specificity weight in the cascade.
How does CSS selector specificity work?
Specificity calculation assigns a three-part numeric value to each selector: (ID count, class count, element count). Higher values win when multiple rules target the same element. Inline styles override all selectors except !important declarations.
What is the difference between class and ID selectors?
Class selectors use a period prefix (.button) and can apply to multiple elements. ID selectors use a hash prefix (#header) and should target unique elements. IDs carry higher specificity weight than classes.
How do I select child elements in CSS?
Use the child combinator arrow (>) for direct children: ul > li. Use a space for descendant selectors that target any nested element: div p selects all paragraphs inside divs regardless of depth.
What are pseudo-class selectors?
Pseudo-class selectors target elements based on state or position. State-based examples include :hover, :focus, and :checked. Structural pseudo-classes like :first-child, :last-child, and :nth-child() target elements by their DOM position.
How do attribute selectors work?
Attribute selector brackets target elements by their HTML attributes. Basic syntax: [type="text"]. Partial matching includes ^= (starts with), $= (ends with), and = (contains). Perfect for data attribute targeting.
Why are my CSS selectors not working?
Common causes: typos in class names, missing dot or hash prefixes, specificity conflicts with other rules, wrong combinator usage, or browser compatibility issues. Use Chrome DevTools or Firefox Developer Tools to inspect which selectors apply to elements.
What is the universal selector in CSS?
The universal selector asterisk () matches every element in the document. It carries zero specificity weight. Use sparingly since it forces the browser to evaluate against all DOM nodes, affecting selector performance.
Can I combine multiple CSS selectors?
Yes. Use commas for selector grouping: h1, h2, h3 applies the same styles to all three. Chain selectors without spaces for compound matching: div.card.active targets divs with both card and active classes simultaneously.
Conclusion
These CSS select examples give you the targeting precision every stylesheet needs.
From element selectors to complex combinator chains, you now have patterns for any styling scenario.
Specificity weight controls which rules win. Keep selectors flat and avoid unnecessary nesting.
Use classes over IDs for maintainable code. Reserve pseudo-classes for state-based and structural targeting.
Test your selectors in Chrome DevTools. Check browser support on caniuse.com before shipping newer syntax like :has() or :where()`.
The cascade works predictably once you understand selector matching and computed styles.
Build your CSS forms, menus, and galleries with confidence.
Bookmark this reference. Return when you need the exact syntax for attribute brackets, nth-child functions, or sibling combinators.
