CSS Selectors Explained — Pick the Right One

Class selectors, IDs, and combinators can be confusing. This guide breaks down which selector to use and when — with real examples.

8 min read Beginner May 2026

Marcus Lim

Senior Web Design Instructor & Curriculum Developer

Senior web design instructor with 12 years of front-end development experience and a track record of training 800+ creative professionals in Singapore.

Why Selectors Matter

When you’re writing CSS, you’re not actually styling HTML elements directly. You’re using selectors — little patterns that tell the browser which elements to style. Get the selector right, and your styles apply exactly where you want them. Get it wrong, and you’ll spend hours wondering why that button still looks weird.

There’s no “one best selector” for everything. Each type has its purpose, and knowing when to use each one will make your code cleaner and easier to maintain. We’re going to walk through the main selector types with real-world examples so you can pick the right tool for the job.

Design workspace with colorful CSS code and design sketches spread across a light wooden desk

Element Selectors — The Foundation

Element selectors are the simplest form. You just write the tag name and CSS applies to every instance of that element on the page. It’s straightforward but also broad — if you write p { color: blue; } , every single paragraph turns blue. No exceptions.

This works great when you want consistent styling across your whole site. All buttons should have the same base appearance? Element selector. Every heading should use the same font? Perfect use case. But here’s where it gets tricky — what if you want one button to look different from the others? That’s when you need something more specific.

Quick Tip

Element selectors have the lowest specificity. That means other selectors will override them. It’s useful for setting defaults, but you’ll need more specific selectors for variations.

Web developer at desk with dual monitors displaying HTML and CSS code in a bright, modern office setting

Mobile phone and tablet displaying responsive web design with different CSS class applications

Class Selectors — Your Daily Driver

You’ll use class selectors constantly. They let you apply styles to specific elements by adding a class name. Write .button-primary and only elements with that class get styled. The same element can have multiple classes too — <button class="button-primary button-large"> — so you’re building reusable styling blocks.

Classes are flexible because you control which elements get them. One paragraph can have the .highlight class while others don’t. You’re not locked into styling every instance of a tag. This is why most production websites rely heavily on classes — they give you precision without being overly specific.

Pro Move

Name your classes based on what they do, not what they look like. .button-primary is better than .blue-button because if you change the color to green tomorrow, the class name still makes sense.

ID Selectors — Use Sparingly

ID selectors target elements with a specific id attribute. They’re incredibly specific — in fact, they’re so specific that they override almost everything else in CSS. You write #header and only the element with id="header" gets styled. Each ID should only exist once on a page. That’s the rule.

Here’s the thing about IDs — they’re useful for page structure (like unique sections) but terrible for styling components you’ll reuse. If you’re styling five cards, don’t use IDs. Use classes instead. IDs are also great for JavaScript selectors because the browser can find them super fast, but for CSS styling, you probably don’t need them as much as you think you do.

Reality Check

Many experienced developers avoid IDs in CSS altogether. The specificity is too high and makes overriding styles difficult later. Save IDs for JavaScript hooks instead.

UX designer sketching wireframes and CSS selectors on paper with color markers in a creative studio

Frontend developer at workstation with CSS selectors displayed, demonstrating combinator syntax on multiple monitors

Combinators — Targeting Relationships

Combinators let you select elements based on their relationships to other elements. The descendant combinator (space) selects any element inside another. Write .card p and it’ll style every paragraph inside an element with the card class. The child combinator ( > ) is stricter — .card > p only targets paragraphs that are direct children, not grandchildren nested deeper.

You’ve also got the adjacent sibling combinator ( + ) and the general sibling combinator ( ~ ). These target elements that come after other elements at the same level. They’re less common but incredibly useful when you need to style based on what comes before something.

Common Pattern

Using descendant combinators makes your CSS context-aware. .sidebar p styles paragraphs differently in the sidebar versus the main content. This keeps your code organized without needing a dozen specific classes.

Understanding Specificity

Here’s the thing that confuses everyone — when two selectors target the same element, which one wins? It’s all about specificity. Element selectors have low specificity. Classes have higher specificity. IDs have even higher specificity. Inline styles beat everything. And !important beats everything else (but don’t use it, seriously).

Think of specificity as a scoring system. An element selector is worth 1 point. A class is worth 10 points. An ID is worth 100 points. If you have a selector that’s worth 11 points competing with one that’s worth 100, the 100-point selector wins. This is why using too many IDs in your CSS causes problems — they’re so high-scoring that nothing can override them without using !important .

Element selector: p { } — 1 point

Class selector: .button { } — 10 points

ID selector: #header { } — 100 points

Inline style: style="color: blue;" — 1000 points

Educational Note

This guide covers the fundamental CSS selector concepts and best practices used in modern web development. While the examples and patterns shown here reflect industry standards, CSS specifications can vary slightly across different browsers and versions. For the most current information, refer to the official CSS specifications and test your code across different browsers before deploying to production.

Choosing the Right Selector

You’re not going to memorize every selector type on your first read. That’s okay. What matters is understanding the tradeoffs. Use element selectors for base styling. Use classes for variations and reusable components. Avoid IDs in CSS (save them for JavaScript). Use combinators when you need to target elements based on their context.

The best selector is the one that’s specific enough to target what you want, but not so specific that you can’t override it later. As you build more projects, you’ll develop instincts about which selector to reach for. Start simple, add specificity when you need it, and your CSS will stay clean and maintainable.

Ready to dive deeper?

Now that you understand selectors, it’s time to learn how to structure your layouts with CSS. Flexbox is the foundation of modern web design.

Explore Flexbox Fundamentals