Style the links in the menu
Pick only the links inside the nav, so the menu can look different from the links in the text.
Every site menu looks different from the links in its articles, and one short selector is how it is done.
A page has links in two places: in the menu at the top, and in the sentences below. A rule on a styles both. To change only the menu, the rule has to say where the links are.
- Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
- Run: Run it and compare the result with your prediction.
- Investigate: Trace how each line of code connects to what you see.
- Modify: Change the code on purpose and check the result.
- Make: Build something new using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
Predict
<style>
header {
background-color: navy;
color: white;
}
</style>
<header>
<h1>Owls club</h1>
<nav>
<ul>
<li><a href="https://example.com/home">Home</a></li>
<li><a href="https://example.com/results">Results</a></li>
</ul>
</nav>
</header>
<p>Read the <a href="https://example.com/results">results</a> from last week.</p>
Read the code. The header rule sets a navy background and white text. The menu is a list of links inside a <nav> inside the header. What colour are the menu links?
Run
Compare the page with your prediction. Then add this rule under the header rule, and watch the menu links change while the link in the paragraph stays blue.
nav a {
color: white;
}
| Code | What it does | Why |
|---|---|---|
header { color: white; } |
Makes the header's own words white | The links inside keep their blue. A link has its own colour, so a rule has to name the link |
nav a { color: white; } |
Makes the links in the nav white | The space means inside: nav a picks every a that sits within a nav |
| the link in the paragraph | Stays blue | It is an a, but it is not inside a nav, so the rule does not pick it |
nav a:hover { text-decoration: underline; } |
Underlines a menu link while the pointer is over it | :hover means "while the pointer is over it". Copy this for now; the colon is part of the selector |
<style>
header {
background-color: navy;
color: white;
}
</style>
<header>
<h1>Owls club</h1>
<nav>
<ul>
<li><a href="https://example.com/home">Home</a></li>
<li><a href="https://example.com/results">Results</a></li>
</ul>
</nav>
</header>
<p>Read the <a href="https://example.com/results">results</a> from last week.</p>
Investigate
<style>
nav a {
color: crimson;
}
</style>
<nav>
<a href="https://example.com/home">Home</a>
<a href="https://example.com/results">Results</a>
</nav>
<p>Read the <a href="https://example.com/rules">rules</a>.</p>
<footer>
<a href="https://example.com/contact">Contact</a>
</footer>
Look at the rule, then at each link.
A space, a comma or a different order?
Sam's rule is on the nav.
Fill in the colour of each link. The browser's usual link colour is blue.
| link | colour |
|---|---|
| Home, in the nav | |
| Results, in the nav | |
| rules, in the paragraph | |
| Contact, in the footer |
Sam wants white menu links on the navy header. The links are still blue, and there is no error. Click the line that causes it.
Modify
The link in the paragraph keeps its underline.
Need a hint?
Add a line inside the nav a rule.
Another hint
text-decoration: none; removes the underline.
Show the expected result
Pick only the links inside the <footer>.
Need a hint?
Use the same shape for the footer: write the part first, then a space, then the tag.
Another hint
footer a { color: gray; }
Show the expected result
Remove the underline from the menu links only.
This ticks when your page has all of the above.
Make the links in the footer gray.
This ticks when your page has all of the above.
Make
Style this club page: a dark header, light menu links that fit it, and the link in the text left as it is.
Need a hint?
Start with the header: one rule for the navy background and white text.
Another hint
Then a rule for the menu links only. The link in the paragraph must not change.
Another hint
Add text-decoration: none; to the menu links, or list-style: none; on the ul if you want no bullets.
Show the expected result
Give the page a dark header and light menu links, and leave the link in the text alone.
This ticks when your page has all of the above.
For teachers
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. About 40 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Students will be able to
- I can write nav a { } to style only the links inside a nav.
- I can say that a space between selectors means inside.
- I can explain why a colour on the nav does not change the links.
Before class
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".
Running the lesson
- Predict and Run: most students say white. Blue on navy is hard to read, which is the reason menus need their own rule. Add the nav a rule and let them see the link in the paragraph stay blue. Ask someone who chose white why the header's colour would reach the links. The idea to land: a link has its own colour.
- Investigate: the trace has four links and one rule. The question about the comma is last lesson's group selector, read against the new one: comma means and, space means inside.
- Modify and Make: the same shape for the footer. The Make check ticks on a header rule, a background colour and the nav a rule. Look at the page for the paragraph link staying blue.
The hard part (on purpose)
Reading nav a as both. Ask which of the two words names the element that changes, and what the first word does.
When students get stuck
- The menu links do not change. Ask: Does the rule name the links, or only the nav? Fix: 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. Ask: Is there a comma between nav and a, or only the a? Fix: Use a space, not a comma, and keep the nav in front of the a.
- The menu is dark text on the dark header. Ask: Which rule sets the link colour? Fix: Add color: white; to the nav a rule, or pick a light colour such as lightyellow.
Stretch and support
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.
Where it leads
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.
What each step is for
- Predict: Students expect a colour set on a container to reach the links inside it; a link keeps its own colour until a rule names the link.
- Run: A space between two selectors means inside, so nav a picks only the links in the nav.
- Investigate: A space means inside: the rule reaches the links in the nav and no others, and it needs the link named, not just the nav.
- Modify: The pattern is parent, space, tag: the same shape styles the links in any part of a page.
- Write nav a { } to style only the links inside a nav.
- Say that a space between selectors means inside.
- Explain why a colour on the nav does not change the links.