CSS Selectors

CSS Selectors: Element, Class, ID, and Grouping Rules

CSS selectors match patterns against HTML elements so you can apply rules precisely where needed. Choosing clean, low-specificity selectors keeps stylesheets predictable as your application grows.

Five Everyday CSS Selectors

1. Element Selector (p, h2): Styles every matching HTML tag type on the page.
2. Class Selector (.card): Targets every element carrying class="card". This is the workhorse selector of modern CSS.
3. ID Selector (#main-nav): Targets the single unique element with id="main-nav".
4. Universal Selector (*): Matches all elements—most commonly used once at the top of a stylesheet for box-sizing: border-box;.
5. Selector List (h1, h2, h3): Applies shared properties to multiple selectors separated by commas.

* {
    box-sizing: border-box;
}

p {
    color: #334155;
    line-height: 1.6;
}

.card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 16px;
}

.card.featured {
    border-color: #2563eb;
}

#promo-banner {
    background: #1e293b;
    color: #f8fafc;
}

Understanding Selector Specificity

When two rules target the same element, the selector with higher specificity wins regardless of line order:

flowchart TD
    A["Inline style attribute (Highest)"] --> B["ID selector (#banner)"]
    B --> C["Class, Attribute & Pseudo-class (.card, :hover)"]
    C --> D["Element & Pseudo-element (p, ::before)"]

Because ID selectors overpower class selectors easily, teams prefer classes for styling and reserve IDs for JavaScript hooks or page anchors.

Common Mistakes to Avoid

• Adding spaces when targeting two classes on the same element: .card.featured matches an element with both classes, whereas .card .featured matches a child .featured inside .card.
• Chaining deep descendant selectors like body div main ul li a: Deep chains lock CSS to rigid HTML structure and break as soon as markup changes.
• Styling everything with #id selectors: High specificity forces awkward overrides later.

Frequently Asked Questions

What happens when two selectors have equal specificity?

Whichever rule appears later (lower down) in the CSS stylesheet wins according to cascade order.

Should I put * { margin: 0; padding: 0; } in my CSS?

Avoid stripping all margins and padding with * because it removes useful default spacing on form controls and lists; use * { box-sizing: border-box; } instead.