css · level 2 · unit 6 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A space between selectors means inside; > means directly inside.
.menu a picks every <a> that sits inside a .menu, at any depth. That link is a of the menu: a child, a grandchild, and so on.
.menu > a is stricter. It only picks an <a> that is a child of .menu, sitting directly inside it with nothing in between.
The space and the > are each a : a symbol between two selectors that says how they are related. Both let you style things by where they sit, with no extra classes.
<div class="menu">
<a href="https://example.com/home">Home</a>
<a href="https://example.com/shop">Shop</a>
</div>
<p>Questions? <a href="https://example.com/help">Ask us</a>.</p>.menu a {
color: white;
}
.menu {
padding: 12px;
background-color: darkslateblue;
}Press show my page to see it here.
The link in the paragraph is not inside .menu, so it keeps its usual blue.
guess first
.list > li gets a border. Which items get one?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<ul class="list">
<li>Apples</li>
<li>Berries
<ul>
<li>Strawberries</li>
</ul>
</li>
</ul>.list > li {
border: 2px solid green;
}your turn
Your turn. Style only the card's links.
Write a selector that picks only the links inside .card, so they turn darkgreen and the link below the card stays blue.
the page you’re styling
<div class="card">
<a href="https://example.com/menu">See the menu</a>
<a href="https://example.com/book">Book a table</a>
</div>
<a href="https://example.com/">Back to home</a>your css
Press show my page to see it here.
- the card's links are dark greennot checked yet
- the link below the card stays bluenot checked yet
fix it
Every link turned orange, not only the menu's. Fix it!
the page you’re styling
<div class="menu">
<a href="https://example.com/home">Home</a>
<a href="https://example.com/blog">Blog</a>
</div>
<p>Read our <a href="https://example.com/terms">terms</a>.</p>your css
Press show my page to see it here.
- the menu links are orangenot checked yet
- the link in the paragraph stays bluenot checked yet
- The comma turns one selector into two. What does each one pick?
.menu, ameans the menu, and also every link anywhere on the page.- Replace the comma with a space,
.menu a, then press run.
nailed it
you picked elements by where they sit. :D
- A space means inside, at any depth.
>means directly inside: children only.- A comma makes a list; a space makes a path.
new words in your collection
- descendant
- combinator
This lesson isn’t saved. A free account remembers every lesson you finish.