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;
}

Next lesson: Project: Landing page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies