🎯 Basic Selectors and Specificity

What Selectors Do

A selector is a pattern that matches HTML elements. It's the bridge between your markup and your style rules — telling the browser exactly which elements each declaration block should apply to.

💡 An analogy: Selectors are address labels. You might address a package to "all residents" (the universal selector), "everyone with the job title Editor" (a type selector), "members of the marketing team" (a class), or "employee #4837" (an ID). Same idea, different precision.

The Five Basic Selectors

1. Universal selector *

Matches every element. Most commonly used for a small reset:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Handy for global resets and quick debugging (* { outline: 1px solid red; } reveals every box on the page), but avoid layering heavy rules on it.

2. Type / element selector

Targets elements by their tag name — perfect for base styles.

p { line-height: 1.6; }
h2 { font-size: 1.5rem; }
a { color: #0066cc; text-decoration: none; }

3. Class selector .name

Targets any element carrying that class. Classes are reusable and the workhorse of modern CSS.

<button class="btn primary">Add to Cart</button>

.btn { padding: 0.5em 1em; border-radius: 4px; cursor: pointer; }
.primary { background: #0066cc; color: white; }

/* Both classes on the SAME element (no space) */
.btn.primary { font-weight: bold; }

4. ID selector #name

Targets the one element with that id. IDs must be unique per page and carry high specificity.

#main-header {
  background: #333;
  color: white;
  padding: 1rem;
}

5. Attribute selector [attr]

Targets elements by an attribute's presence or value, with several matching operators:

[type="text"]   { border: 1px solid #ccc; }  /* exact match */
[class*="btn"]  { cursor: pointer; }          /* contains "btn" */
[href^="https"] { color: green; }             /* starts with */
[src$=".jpg"]   { border: 2px solid #ddd; }   /* ends with */
[data-status="active"] { background: #e6ffe6; } /* data-attribute */

Combining Selectors

Combinators join simple selectors to describe relationships in the document tree.

Specificity

When more than one rule targets the same element and they set the same property, specificity decides the winner. It's a scoring system: the more specific selector applies its style.

Calculating Specificity

Specificity is usually written as three numbers, (ID, class, type) — sometimes with a leading slot for inline styles. Count the pieces in your selector:

• ID column: number of #id selectors
• Class column: number of classes, attribute selectors, and pseudo-classes
• Type column: number of element/type selectors and pseudo-elements

Compare columns left to right. A single ID (1-0-0) beats any number of classes (0-99-0) — the columns don't "carry" like ordinary digits.

A worked conflict

<div id="container">
  <p class="text">First</p>
  <p class="text highlight">Second</p>
  <p id="special" class="text">Third</p>
</div>

p               { color: black; }  /* 0-0-1 */
.text           { color: blue;  }  /* 0-1-0 */
.text.highlight { color: orange;}  /* 0-2-0 */
#container p    { color: green; }  /* 1-0-1 */
#special.text   { color: red;   }  /* 1-1-0 */

The Cascade

When two rules have equal specificity, the one declared last wins. That "last one wins" behavior is what puts the "cascading" in Cascading Style Sheets.

.button { background: blue; }
/* Same specificity, declared later — this one wins */
.button { background: green; }

The full order the browser uses to resolve any conflict:

1. Origin & importance — browser defaults, then your styles, with !important flipping the priority
2. Specificity — the scoring above
3. Source order — last declaration wins on a tie

Best Practices

Methodologies like BEM exist precisely to keep specificity flat by using descriptive single classes:

.card {}          /* Block */
.card__title {}   /* Element */
.card--featured {}/* Modifier */

Hands-on Exercise

/* (a) raise specificity — 0-2-0 beats a bare p */
p.note { color: crimson; }

/* (b) source order — same specificity, declared last wins */
p { color: black; }
.note { color: crimson; }

/* (c) last resort — avoid in real code */
.note { color: crimson !important; }

Summary & Quiz

📚 Further Reading

• MDN — CSS selectors
• web.dev — Specificity
• Specificity Calculator
• BEM methodology

🚀 What's Next?

With selectors under control, we turn to what they most often style: text. Next up is typography — fonts, sizing, spacing, and the properties that make text readable.