Summary - Breadcrumb menu
Build a breadcrumb menu with advanced selectors.
Five selectors, one menu
In this group you learned five tools: child (>), descendant (space), adjacent sibling (+), attribute patterns (^$*), and :has. Now you will combine them in a breadcrumb menu.
A breadcrumb shows the path of the page the user is on. Each step is a link, the last step is plain text. Advanced selectors let you draw this distinction in a single line.
Exercise Breadcrumb base styles
Add two style blocks. First a nav.breadcrumb a selector with color: navy. Second a nav.breadcrumb > span selector with color: gray. Links turn navy, separators turn gray.
Show example solution
/* breadcrumb base styles */
nav.breadcrumb a {
color: navy;
}
nav.breadcrumb > span {
color: gray;
}Exercise Mark the active step and the image link
Add two more style blocks. First an a[href*="current"] selector with font-weight: bold. Second an a:has(> img) selector with display: block. The active step turns bold and image links become block.
Show example solution
/* active step and image link */
a[href*="current"] {
font-weight: bold;
}
a:has(> img) {
display: block;
}Test yourself
-
Which selector catches links containing 'login'?
a[href*="login"] { font-weight: bold; }- Links whose href starts with 'login'
- Links whose href ends with 'login'
- All links whose href contains 'login'
- Only links without an href attribute
Show answer
All links whose href contains 'login' — Correct. * matches a substring; any link whose href contains 'login' is caught.
-
Select links inside the breadcrumb
____ { display: flex; gap: 0.5rem; }Show answer
nav.breadcrumb a { display: flex; gap: 0.5rem; }