Students find out that an element takes every rule that matches it, that a class beats a tag and a later rule beats an equal one, and that a comma shares one rule between selectors.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Predict and Run 10 min · Investigate 12 min · Modify 8 min · Make 10 min
Read the unit primer "Layout and components" first, then do the Make task yourself in the playground (about 5 minutes).
Students have written rules and classes in Course A, but always one at a time. The new idea is that an element can match several rules at once. The browser keeps every property from every matching rule. Only where two rules set the same property does it pick: a class beats a tag, and between rules equally exact the later one wins. A group selector is a comma list, h1, p { }, one rule for several kinds of element.
.note below the p rule and see that nothing changes. Then make the comma edit. Ask someone who chose the last rule to say what happens to the size. The idea to land: every matching rule applies.On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.
Swap pages with a partner. Pick one line of text and list every rule that matches it, then say its colour and size without running it.
Listen for students who stop at the first matching rule. Ask what the other rules add.
Believing only one rule applies to an element. Ask the student to list every rule that matches the line before they say what it looks like.
| What you will see | A question to ask | The fix |
|---|---|---|
| A class rule does nothing and the page shows the tag rule. | Does the class name in the rule match the one in the tag, capitals too? | Make the two names identical and keep the dot only in the CSS. |
| The group rule only styles the first selector. | Is there a comma between the selectors, and a brace after the last one? | Write h1, p { with a comma between the selectors and no comma after the last. |
| A student thinks the class must be written last. | Move the class rule to the top. What changes? | Nothing changes. A class beats a tag wherever it is written. |
One possible solution for each task. Other correct programs are fine.
<style>
h1, p {
color: navy;
}
</style>
<h1>Swimming carnival</h1>
<p>The carnival is on Thursday.</p>
<p>Bring a towel and a hat.</p>
<style>
.alert {
color: crimson;
}
h1, p {
color: navy;
}
</style>
<h1>Swimming carnival</h1>
<p>The carnival is on Thursday.</p>
<p class="alert">Bring a towel and a hat.</p>
<style>
.signup {
color: crimson;
font-size: 24px;
}
h1, h2, p {
color: navy;
font-family: sans-serif;
}
</style>
<h1>Owls club</h1>
<h2>Training</h2>
<p>We train on Tuesday after school.</p>
<h2>New members</h2>
<p>Everyone is welcome.</p>
<p class="signup">Sign up at the office by Friday.</p>
Stretch: Add a second class, `big`, that sets only the font size, and put both classes on one paragraph: class="signup big". Which properties come from which class?
Support: Give students the Modify starter and ask them only to join the two rules with a comma, then mark one paragraph with a class.
A paragraph matches p { color: teal; font-size: 20px; } and .note { color: crimson; }. What colour and size is it?
Crimson and 20px. It takes both rules; where they clash on colour, the class rule wins.
Next lesson picks only the links inside a menu, with a space between two selectors. Class idea: look at the stylesheet of a real school page and find two rules that must both apply to one heading.