CSS Selectors & how to learn CSS

Why CSS feels confusing — and how to fix it

CSS isn't hard because there's too much to memorize. It's confusing because three invisible systems run at once: selecting (what gets styled), the cascade (which rule wins), and layout (how boxes flow). Learn them as separate ideas and the fog lifts.

The best way to actually learn it

1. One concept at a time. Don't open 20 properties at once. Learn selectors fully, then the box model, then color/typography, then layout.
2. Type it, don't copy it. Re-typing code builds muscle memory that copy-paste never will.
3. Use DevTools constantly. Right-click any element → Inspect. Edit CSS live and watch it change — this is the fastest feedback loop in web dev.
4. Steal from real sites. Inspect a site you like and read how its rules are built. CSS is more readable than you think.
5. Build → break → fix. Change a value, see what happens, undo it. Breaking things on purpose teaches cause and effect.
6. Don't memorize — reference. Even pros look things up. Keep a cheat sheet (like the one below) and repetition will do the memorizing for you.

What good selectors unlock

Selectors aren't trivia — they're leverage. The right one lets you style hundreds of elements at once, react to the user, and decorate a page without touching the HTML. Here's where they pay off on real projects every day:

The anatomy of a rule

Before the selectors, lock in the shape of every CSS rule. Everything else is a variation on this.

.button {              /* selector — WHAT to style */
  color: white;       /* declaration: property + value */
  background: #8b5cf6;
  padding: 10px 18px;
}                       /* the { } is the "declaration block" */

Basic selectors

The four you'll use every single day — plus how to group them. These point at elements by their tag, a class you add, or a unique id.

/* Type — every <p> on the page */
p { color: #cbd5e1; }

/* Class — any element with class="d-highlight" (reusable) */
.d-highlight { border-left: 3px solid #8b5cf6; }

/* ID — the ONE element with id="dSpecial" (unique per page) */
#dSpecial { border-left: 3px solid #ec4899; }

/* Universal — literally everything */
* { box-sizing: border-box; }

/* Grouping — apply the same rule to several selectors */
h1, h2, h3 { font-family: sans-serif; }

Combinators — selecting by relationship

These target elements based on where they sit relative to others. The highlighted chips below show exactly what each one grabs.

/* Descendant (space) — ANY .box span, nested at any depth */
.box span { color: tomato; }

/* Child (>) — only DIRECT children */
.box > span { font-weight: bold; }

/* Adjacent sibling (+) — the element IMMEDIATELY after */
h2 + p { margin-top: 0; }

/* General sibling (~) — ALL following siblings */
h2 ~ p { color: gray; }

Attribute selectors

Target elements by their HTML attributes and values — great for styling form fields and links without adding extra classes.

/* Exact match */
input[type="email"]    { border-color: #8b5cf6; }
input[type="password"] { border-color: #ec4899; }

/* Starts with  ^=   /  Ends with  $=   /  Contains  *= */
a[href^="https"]::before { content: "🔒 "; }
a[href$=".pdf"]::after   { content: " 📄"; }
a[href*="example"]       { color: teal; }

/* Just "has the attribute at all" */
[disabled] { opacity: 0.5; }

Pseudo-classes — state & position

A pseudo-class (one colon :) styles an element in a particular state (hovered, focused) or position (first, even, nth). Hover the button and tab into it to see the states fire.

/* State — react to the user */
button:hover  { background: #8b5cf6; }
button:focus  { outline: 3px solid rgba(139,92,246,.4); }
a:visited     { color: purple; }
input:checked { accent-color: green; }

/* Structural — react to position */
li:first-child      { font-weight: bold; }
li:last-child       { color: pink; }
li:nth-child(even)  { background: #22222b; }   /* zebra stripes */

/* :not() — everything EXCEPT the match */
li:not(.active) { opacity: 0.7; }

Pseudo-elements — style part of an element

A pseudo-element (two colons ::) styles a piece of an element, or injects decorative content that isn't in your HTML. ::before and ::after are the workhorses.

/* Inject content before/after — needs the content property */
.badge::before { content: "★"; color: #fbbf24; }
.card::after  { content: ""; display: block; clear: both; }

/* Style a PART of the text */
p::first-letter { font-size: 2.6rem; font-weight: 800; color: #ec4899; float: left; }
p::first-line   { font-weight: bold; }
::selection      { background: #8b5cf6; }   /* highlighted text */
::placeholder    { color: #71717a; }

Specificity — why your CSS "isn't working"

When two rules target the same element, the more specific one wins — not necessarily the last one. Read specificity as three columns: IDs, classes, types. Higher column wins, left to right.

Every common selector at a glance

Bookmark this. You don't memorize selectors — you look them up until they stick.

Use CSS to its full capacity

Knowing the selectors is half of it. These habits separate people who fight CSS from people who steer it.