Selectors

Why you need this

The rule p { color: red; } colours all paragraphs. What if you need to colour only one? Or only the links in the menu? Or every second row of a table? That's what selectors are for — ways to point precisely at the elements a style applies to. A real site can't do without them.

Selecting by tag

Already familiar: the tag name without brackets.

h2 { color: teal; }

Result: every <h2> on the page is teal.

A class

A class is a label you hang on elements yourself with the class attribute. In CSS a class is written with a dot:

<style>
  .price { color: green; font-weight: bold; }
</style>
<p>Tea — <span class="price">$1</span></p>
<p>Coffee — <span class="price">$2</span></p>

Result: both prices are green and bold, the rest of the text is ordinary.

One class can go on any number of elements, and one element can have several classes separated by spaces: class="price sale". Then the rules of both .price and .sale apply to it.

Name classes by meaning: .price, .error, .card — not .red-text (what if errors become orange tomorrow).

An id

An id is the unique name of an element (one per page). In CSS it is written with a hash:

<style>
  #logo { font-size: 30px; }
</style>
<div id="logo">CodeWithMe</div>

Result: the big text «CodeWithMe».

Classes are used for styles more often: an id is too "strong" (see below) and doesn't repeat. ids are needed for anchors (href="#logo") and for JavaScript.

Groups and combinations

h1, h2, h3 { font-family: Georgia, serif; }  /* a group: with commas */
nav a { color: white; }                      /* a descendant: an a anywhere inside nav */
ul > li { list-style: square; }              /* a child: an li directly inside ul */
p.note { font-style: italic; }               /* a p that has the note class */

• A comma — "this and that": one rule for several selectors.
• A space — "inside": nav a finds a link at any depth inside <nav>.
• > — "directly inside": only direct children.
• No space — "at the same time": p.note is a paragraph with the note class (a <div> with .note won't match).

Pseudo-classes

A pseudo-class is a state or position of an element. It is written after a colon:

a:hover { color: orange; }          /* under the mouse cursor */
input:focus { border-color: blue; } /* the field with the cursor in it */
li:first-child { font-weight: bold; } /* the first child of its parent */
li:last-child { color: gray; }      /* the last one */
tr:nth-child(even) { background: #eee; } /* even: 2, 4, 6… */
tr:nth-child(odd) { background: white; } /* odd: 1, 3, 5… */
li:nth-child(3) { color: red; }     /* only the third one */

Result: links turn orange on hover, and the table becomes a "zebra" with grey even rows.

:nth-child(3n) selects every third element — 3, 6, 9…

Selector strength (specificity)

When rules conflict, the more precise selector wins — no matter which one is written later:

<style>
  #main { color: red; }
  .text { color: green; }
  p { color: blue; }
</style>
<p id="main" class="text">What colour am I?</p>

Result: red. Selector strength: id > class (and pseudo-class) > tag. The "later is stronger" order only works for equal strength.

You can estimate strength with "points": each #id is a hundred, each .class or :pseudo-class is a ten, each tag is a one. nav a = 2, .menu a = 11, #top a = 101.

How it works inside

The browser checks a selector from right to left: for nav a it takes every link and asks "is there a <nav> among my ancestors?". So the rightmost part of a selector is the main one: it says which element gets styled.

Common mistakes

1. A missing dot or hash. warning { … } looks for a <warning> tag, not a class.
2. A dot in the HTML. class=".warning" is wrong. In HTML it's written without the dot: class="warning".
3. An extra space. p .note (a descendant with the class inside a paragraph) and p.note (the paragraph itself with the class) are different things.
4. A rule "doesn't work" because of strength. If a style didn't apply, check for a stronger selector.
5. !important everywhere. !important beats everything, but then nothing can beat it. Use it as a last resort.

Cheat sheet

Selector	What it selects
p	every <p>
.card	elements with class="card"
#logo	the element with id="logo"
h1, h2	both <h1> and <h2>
nav a	an <a> anywhere inside <nav>
ul > li	an <li> directly inside <ul>
p.note	a <p> with the note class
a:hover, input:focus	under the mouse, in focus
:first-child, :last-child	the first, the last child
:nth-child(even / odd / 3)	even, odd, the third
#id > .class > tag	selector strength