meet it

A dot picks every element wearing a class.

Back in lesson 2 you met class, a label many elements can share. A is a dot followed by the class name: .sale picks every element with class="sale".

The tag does not matter. A <p>, an <li> and an <h2> can all wear the same class, and one rule styles them all.

An element can wear two classes, with a space between them: class="tip big". It gets the styles of both.

<h1>Shop</h1>
<p class="sale">Teapots: half price!</p>
<p>Mugs: full price.</p>
<p class="sale">Scarves: half price!</p>

.sale {
  color: crimson;
  font-weight: bold;
}

Press show my page to see it here.

The class name in the HTML has no dot. The dot only goes in the CSS.

guess first

Two classes on one element. What does it get?

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

<p class="tip">Water your plants.</p>
<p class="tip big">Do not water the cat.</p>

.tip {
  color: green;
}
.big {
  font-size: 24px;
}

your turn

Your turn. Warn people about the spicy food.

Fill in the class selector so both spicy dishes turn red and the rice stays black. Remember the dot.

the page you’re styling

<h1>Menu</h1>
<ul>
  <li class="spicy">Chilli</li>
  <li>Rice</li>
  <li class="spicy">Hot wings</li>
</ul>

your css

Your code

Press show my page to see it here.

the chilli is rednot checked yet
the hot wings are rednot checked yet
the rice stays blacknot checked yet

fix it

The note has no yellow. Can you fix it?

the page you’re styling

<p class="note">Back in five minutes.</p>
<p>Ring the bell for help.</p>

your css

Broken code to fix

Press show my page to see it here.

the note is yellownot checked yet

The rule picks nothing at all. Look at the start of the selector.
On its own, note means a tag called <note>. A class needs a mark in front.
Put a dot in front, .note, then press run.

nailed it

you picked out elements by class. :D

.name picks every element wearing that class.
Any tag can wear a class, and many can share it.
Forget the dot and the browser looks for a tag instead.

new words in your collection

class selector

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