meet it

A more exact selector beats a later one.

In lesson 8 the later rule won. That only happens when the selectors are equally exact. How exact a selector is has a name: .

A tag like p picks lots of elements, so it is the least exact. A class is more exact. An id, which picks one element, is the most exact of all.

So an id beats a class, and a class beats a tag, wherever they sit in the CSS. Only when two selectors are equally exact does the later one win.

<p id="intro" class="tip">Who wins?</p>

#intro {
  color: green;
}
.tip {
  color: orange;
}
p {
  color: blue;
}

Press show my page to see it here.

The id rule comes first but still wins, so the words are green.

guess first

Class first, tag second. Who wins?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<p class="alert">The bus is late.</p>

.alert {
  color: red;
}
p {
  color: gray;
}

your turn

Make the cake line purple. Fill in a selector for the first rule that beats the .note rule below it, even though it comes first.

the page you’re styling

<p class="note" id="cake">Today only: free cake!</p>

your css

Your code

Press show my page to see it here.

fix it

the page you’re styling

<p id="menu" class="dark">Today's menu: fish pie</p>

your css

Broken code to fix

Press show my page to see it here.

The words are there, but black on black. Which rules set the colour of the words?
Both rules set color. An id beats a class, so #menu wins.
Delete the whole #menu rule, then press run.

nailed it

new words in your collection

This lesson isn’t saved. A free account remembers every lesson you finish.