Selectors and Priority

A selector points at elements. Today you learn many ways to point, and which rule wins when two rules disagree.

Quick check

Remember: class and id

10 XP

A quick question from lesson 1.4. It is optional.

Four basic selectors

/* Universal: every element */
* { box-sizing: border-box; }
/* Type (element): every p */
p { color: dimgray; }
/* Class: every element with class="red-text" */
.red-text { color: darkred; }
/* ID: the one element with id="main-title" */
#main-title { font-size: 24px; }

• Type selector: the name of a tag, like p or h1. It chooses every element of that type, wherever it is on the page.
• Class selector: a dot and the class name. One element can have several classes, with spaces between them: class="box blue-background". p.red-text means a <p> that has this class.
• ID selector: # and the id. An id is used only once on a page. JavaScript often finds elements by their id (Unit 4).
• Group: commas give several selectors the same rule, so you write it once: h1, h2, p, .special-text { color: blue; }

Relationships and attributes

div p { color: blue; }           /* every p inside a div */
div > p { color: green; }        /* only p elements directly inside a div */
h1 + p { font-weight: bold; }    /* the first p right after an h1 */
h1 ~ p { font-style: italic; }   /* every p after an h1, with the same parent */
a[target] { background-color: yellow; }      /* links that have a target attribute */
input[type="text"] { border: 1px solid black; }  /* text fields only */

States and parts

A pseudo-class chooses an element in a state or a place: :hover (the mouse pointer is over it), :focus (it is active for typing or the keyboard), :first-child, :last-child and :not() (everything except). A pseudo-element chooses a part: ::first-letter, or ::before and ::after, which add content.

button:hover {
  background-color: #043E74;
  color: white;   /* light text on the dark background */
}
li:first-child { color: darkred; }
p::after { content: " (read)"; color: dimgray; }

The slide's hover colour darkblue keeps the dark text, so the text almost disappears. We add color: white.

Matching

What does each selector choose?

Required 15 XP

Tap a selector, then tap the elements it chooses.

Which rule wins?

When several rules fit one element, the browser compares their strength. This strength is called specificity.

Quick check

Which rule wins?

Required 10 XP

Examples from the slides

h1.slanted { font-style: italic; } chooses <h1 class="slanted">. It does not choose a plain <h1> (no class) or <p class="slanted"> (not an h1).

img[title="logo"] { width: 150px; } chooses an image whose title is exactly "logo". An image with title="logo-new" or with no title is not chosen.

Your turn: selector detective

Guess first, then choose the four selectors and press Run.

Practice

Selector detective

Required 30 XP

Four rules, four missing selectors. Choose the selector that changes exactly the right elements: 1 only the h1 with the class title, 2 only the first list item, 3 the text field, 4 each link in the menu, not the whole menu.

Slide bugs: selectors that match nothing

Two slides have selectors that choose nothing. On one of them, two elements also share an id.

Practice

Slide bugs: selectors that match nothing

Required 30 XP

This code comes from two course slides. Each rule has a small bug, so it matches nothing. Find the bugs and fix them. The slide also gave the same id to two elements; the HTML here already uses a class instead.

Type selector

A tag name, like p. Chooses every element of that type.

Class selector

A dot and a class name, like .note.

ID selector

# and an id, like #tip. One element only.

Descendant selector

Two selectors with a space: the second one inside the first, like nav a.

Pseudo-class

A state or a place, after a colon: :hover, :first-child.

Pseudo-element

A part of an element, after two colons: ::before.

Specificity

The strength of a selector. The stronger rule wins.

In short

• * every element, p every paragraph, .note a class, #tip one id.
• No space means "and" (h1.title); a space means "inside" (nav a); a comma means "and also" (h1, h2).
• Inline style beats id, id beats class, class beats type. In a tie, the later rule wins.
• An id is used once; for several elements, use a class.

Sources

1. MDN Web Docs (2026). CSS selectors (selector types, grouping).
2. MDN Web Docs (2026). Basic selectors (type, class, id, universal).
3. MDN Web Docs (2026). Combinators (space, >, +, ~).
4. MDN Web Docs (2026). Attribute selectors.
5. MDN Web Docs (2026). Pseudo-classes and pseudo-elements.
6. MDN Web Docs (2026). Specificity (inline styles, id, class, type; the universal selector has no specificity).
7. MDN Web Docs (2026). id (unique in the whole document).