Class & ID Selectors

The idea

A class selector is like a sticker you can put on MANY different boxes to style them all the same way. An id selector is a name tag meant for exactly one specific box.

What it actually is

So far every selector styled ALL elements of one tag (every h1, every p). A class selector (.name) styles only elements with that class attribute, and an id selector (#name) styles the one single element with that id - both let you target specific elements instead of a whole tag.

How you write it

.class-name {
  property: value;
}
#id-name {
  property: value;
}

A worked example

.highlight {
  color: red;
}

The dot before highlight means this rule only applies to elements with class="highlight" in their HTML - not every element on the page, just the ones tagged with that exact class.

#footer-text {
  font-style: italic;
}

The # before footer-text means this rule targets the ONE element with id="footer-text" - ids are meant to be unique, used for a single specific element rather than a group.

Mistakes children actually make

Mistake 1: forgetting the dot or hash - writing highlight { color: red; } (no dot) tries to style a tag called <highlight>, which doesn't exist, instead of the class. Mistake 2: using the same id on multiple elements - ids are supposed to be unique per page; for styling a group of elements, use a class (which CAN repeat) instead. Mistake 3: confusing p.highlight (no space - a <p> that ALSO has class="highlight") with p .highlight (a space - anything with class="highlight" nested INSIDE a <p>) - that one space changes which elements actually get styled.

Then they try it

In the app this lesson continues with the animated explanation, spoken aloud, and then the practice: Make the .highlight paragraph's text red, and make the #footer-text paragraph italic. The editor runs your child’s real code and checks the result, with their coding buddy reacting to what they wrote.