By the end of this lesson, you will be able to confidently do the following 3 things.

• ▸✅ 5 selector types (element, class, ID, attribute, pseudo) + specificity
• ▸✅ Specificity calculation formula + the danger of !important
• ▸✅ Using :hover / :focus / :nth-child

Keep the learning objectives as a checklist — close the lesson only when you can answer all of them.

The Core Idea

CSS selector = a pattern that specifies which element in HTML to apply a style to. Selecting precisely is the foundation of maintainable CSS.

5 Basic Selector Types

/* 1. Tag selector — all <p> elements */
p { color: gray; }

/* 2. Class selector — everything with class="highlight" */
.highlight { background: yellow; }

/* 3. ID selector — the element with id="main" (only one per page) */
#main { padding: 20px; }

/* 4. Attribute selector — input with type="submit" */
input[type="submit"] { background: blue; }

/* 5. Pseudo-class — hover state */
button:hover { background: green; }

Combinators — Selecting by Relationship

/* Child combinator (direct only) */
nav > a { color: red; }     /* direct children <a> of nav */

/* Descendant combinator (any depth) */
nav a { color: blue; }       /* all <a> inside nav */

/* Sibling combinators */
h2 + p { margin-top: 0; }    /* p *immediately after* h2 */
h2 ~ p { color: gray; }      /* *all* p after h2 */

Commonly Used Pseudo-classes

a:hover    { color: red; }       /* on mouse over */
a:active   { color: orange; }    /* at the moment of click */
a:visited  { color: purple; }    /* visited link */
input:focus { border: 2px solid blue; }   /* when focused */
input:disabled { opacity: 0.5; }
li:first-child { font-weight: bold; }     /* first child */
li:last-child  { border: 0; }
li:nth-child(2n) { background: #eee; }    /* even rows (zebra stripe) */

Class vs. ID — When to Use Which

• ▸Class (.) = reusable across multiple elements. Use this 90% of the time.
• ▸ID (#) = unique on the page. For hooking into JS, anchoring (#section1), or accessibility.

> 💡 Industry convention: Use classes for styling. Reserve IDs for JS hooks or anchor targets only.

Overly Specific Selectors — Maintenance Hell

/* ❌ Very bad */
body > main > article > div.container > ul > li > a.btn { ... }

/* ✅ Good */
.btn-primary { ... }

The longer the selector, the more tightly coupled it is to the HTML structure. Change one line of HTML and all the CSS breaks. A single class name is the safest choice.

BEM Naming Convention — Industry Standard

/* Block__Element--Modifier */
.card { ... }                  /* Block */
.card__title { ... }           /* Element */
.card__title--large { ... }    /* Modifier */

Prevents conflicts and clarifies intent in complex components. It may feel old-fashioned now that Tailwind and CSS-in-JS exist, but it remains the standard in traditional CSS environments.

Quick Summary

Knowing just the 5 basics (tag, class, ID, attribute, pseudo) and the combinators (child, descendant, sibling) covers 80% of real-world cases. Don't go deeper — keep it simple with a class-first approach.

Once you understand the concepts in this lesson, you can give AI specific instructions. Instead of a vague "fix this," you make vocabulary-driven requests — and that is where token savings begin.

• ▸"Resolve the specificity conflict in this CSS and fix the priority without using !important"
• ▸"Rename these class names following BEM convention"
• ▸"Refactor this nested selector to be flatter (depth 2 or less)"

Why This Saves Tokens

Without the right vocabulary, even after receiving an AI response you have to ask "what does that mean?" all over again. Those follow-up questions eat tokens. Learn the concepts once and conversations wrap up in a single round.