css · level 3 · unit 3 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
flips a test, so you can style what is missing.
:not() matches elements that fail the selector in its brackets. li:not(.done) picks every item without the done class. Like :is(), it weighs as much as its strongest selector.
Put :has() inside it and you can style what is missing. .card:not(:has(img)) matches cards with no picture. Real data is messy: a product with no photo, a profile with no bio. Plan for it, and the page never looks broken.
<div class="card">
<img src="cake.svg" alt="Lemon cake">
<p>Lemon cake</p>
</div>
<div class="card">
<p>Carrot cake</p>
</div>.card {
padding: 12px;
}
.card:not(:has(img)) {
border-top: 40px solid #f4a261;
}Press show my page to see it here.
guess first
Which tasks turn bold and crimson?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<ul>
<li class="done">Pack bags</li>
<li>Book a taxi</li>
<li>Water the plants</li>
</ul>li:not(.done) {
font-weight: bold;
color: crimson;
}your turn
Your turn. Mark profiles that have no bio.
Fill in the selector so a profile with no .bio inside gets a dashed border. Use :not() and :has() together.
the page you’re styling
<div class="profile">
<h3>Ava</h3>
<p class="bio">Runs on coffee.</p>
</div>
<div class="profile">
<h3>Sam</h3>
</div>your css
Press show my page to see it here.
- the profile without a bio is dashednot checked yet
- the profile with a bio stays solidnot checked yet
fix it
Every card got the placeholder fill. Can you fix it?
the page you’re styling
<div class="card">
<img src="ball.svg" alt="A football">
<p>Football</p>
</div>
<div class="card">
<p>Tennis</p>
</div>your css
Press show my page to see it here.
- the Tennis card gets the yellow fillnot checked yet
- the Football card stays plainnot checked yet
- Both cards turned yellow. What exactly does
:not(img)test? .card:not(img)asks whether the card itself is an image. It never is, so every card passes.- Test what the card holds instead,
.card:not(:has(img)), then press run.
nailed it
you planned for messy real data. :D
:not()matches whatever fails its test.:not(:has(x))styles elements that are missing something.- Plan for missing photos, bios and prices.
new words in your collection
- :not()
This lesson isn’t saved. A free account remembers every lesson you finish.