Students pick only the links inside a nav with a descendant selector, and find out that a colour on the nav does not reach the links, and that a space means inside.
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).
A descendant selector is two selectors with a space between: nav a picks every a anywhere inside a nav. A link keeps its own colour until a rule names it, which is why nav { color: white; } leaves the menu blue. :hover is shown as a line to copy for now, not taught: it means "while the pointer is over it".
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. Without running them, point to every link that your partner's menu rule changes, and every one it leaves alone.
Listen for students who include the links in the text. Ask what the space in the selector means.
Reading nav a as both. Ask which of the two words names the element that changes, and what the first word does.
| What you will see | A question to ask | The fix |
|---|---|---|
| The menu links do not change. | Does the rule name the links, or only the nav? | Write nav a { color: white; } with a space between nav and a. A rule on the nav alone leaves the links blue. |
| Every link on the page changes. | Is there a comma between nav and a, or only the a? | Use a space, not a comma, and keep the nav in front of the a. |
| The menu is dark text on the dark header. | Which rule sets the link colour? | Add color: white; to the nav a rule, or pick a light colour such as lightyellow. |
One possible solution for each task. Other correct programs are fine.
<style>
header {
background-color: navy;
color: white;
}
nav a {
color: white;
text-decoration: none;
}
</style>
<header>
<h1>Owls club</h1>
<nav>
<a href="https://example.com/home">Home</a>
<a href="https://example.com/results">Results</a>
</nav>
</header>
<p>Read the <a href="https://example.com/results">results</a> from last week.</p>
<footer>
<a href="https://example.com/contact">Contact us</a>
</footer>
<style>
header {
background-color: navy;
color: white;
}
nav a {
color: white;
text-decoration: none;
}
footer a {
color: gray;
}
</style>
<header>
<h1>Owls club</h1>
<nav>
<a href="https://example.com/home">Home</a>
<a href="https://example.com/results">Results</a>
</nav>
</header>
<p>Read the <a href="https://example.com/results">results</a> from last week.</p>
<footer>
<a href="https://example.com/contact">Contact us</a>
</footer>
<style>
header {
background-color: navy;
color: white;
}
nav a {
color: lightyellow;
text-decoration: none;
}
</style>
<header>
<h1>Owls club</h1>
<nav>
<a href="https://example.com/home">Home</a>
<a href="https://example.com/results">Results</a>
<a href="https://example.com/join">Join</a>
</nav>
</header>
<p>Read the <a href="https://example.com/results">results</a> from last week.</p>
Stretch: Use nav a:hover with a background-color to make a link light up when the pointer is over it. Copy the line from the Run table and change it.
Support: Give students the Modify starter and do the first task together on the board: the part first, then a space, then the tag.
A page has a link in the nav and a link in a paragraph. Which does nav a { color: white; } change?
Only the link in the nav. The space means inside, so the link in the paragraph is not picked.
Next lesson looks at why some elements start a new line and others sit in a line, which a menu needs to run across the page. Class idea: find three menus on websites you use and say what colour their links are.