Choosing What to Style

The simplest selector is an element name, and it matches every one of them in the document.

p    { line-height: 1.6; }h1   { font-size: 2rem; }img  { max-width: 100%; }body { margin: 0; }

These are right for site-wide defaults — the base look of paragraphs, headings, links. They become a problem the moment you want some paragraphs different, because there is no way to say which.

The universal selector * matches everything. It has one common use, and otherwise you should be suspicious of it.

*, *::before, *::after { box-sizing: border-box; }

A class is a label you put on elements yourself, and a class selector is a full stop followed by the name. This is the workhorse — most real stylesheets are mostly classes.

<p class="intro">The first paragraph.</p><p>An ordinary one.</p><button class="btn btn-primary">Send</button>

.intro       { font-size: 1.2rem; color: #555; }.btn         { padding: 0.5rem 1rem; border-radius: 6px; }.btn-primary { background: #3e7f5c; color: white; }

An element can carry several classes, separated by spaces, and every matching rule applies. That button gets both .btn and .btn-primary — shared styling plus a variant, which is one of the most useful patterns in CSS.

An id is a unique name for one element, and the selector is a hash.

<div id="main-nav">…</div> #main-nav { background: #f5f5f5; }

An id must be unique in the document — the same id twice is invalid, and behaviour with things like #fragment links becomes undefined.

Both can coexist happily: <section id="contact" class="panel"> — the id for linking to, the class for styling.

Combinators describe a relationship between elements. Two of them cover almost everything, and confusing them is the most common reason a selector matches nothing.

nav a       { }   /* descendant: an a ANYWHERE inside a nav       */nav > a     { }   /* child: an a that is a DIRECT child of a nav   */h2 + p      { }   /* adjacent sibling: the p IMMEDIATELY after h2  */h2 ~ p      { }   /* general sibling: every p after h2, same parent */

The first two are the ones to be careful with. Given a nav containing a list containing links, nav a matches the links and nav > a matches nothing at all — the anchors are children of the li, not of the nav.

<nav>          ← nav  <ul>         ← a CHILD of nav    <li>       ← a child of ul, a DESCENDANT of nav      <a>      ← a descendant of nav, not a child    </li>  </ul></nav>

Try it: the rule below uses nav > a, so nothing turns green. Replace the > with a space and watch every link change.

A pseudo-class is a colon and a keyword, and it matches elements in a particular condition — hovered, focused, first of their kind.

a:hover           { text-decoration: underline; }a:focus-visible   { outline: 2px solid #3e7f5c; }button:disabled   { opacity: 0.5; }input:checked     { } li:first-child    { }li:last-child     { border-bottom: none; }li:nth-child(2n)  { background: #fafafa; }   /* every second one */ p:not(.intro)     { }                        /* every p WITHOUT that class */

Related but different: pseudo-elements use two colons and create something that is not in your HTML at all.

.quote::before  { content: "\201C"; font-size: 2em; }p::first-line   { font-variant: small-caps; }::selection     { background: #dbefdb; }

::before and ::after need a content property, even if it is empty, or nothing is generated. And their content is not real text in the document — it is not always announced by screen readers and cannot be found by the browser's in-page search, so decoration only.