Project 17: Search Results Page

CSS Stylist

Builds on these lessons

Modern Has Selector Modern Where Is Selectors Modern Nesting Modern Scope

Step 1 of 3

Project

The :has() Selector

Add .search-result:has(img) { grid-template-columns: 80px 1fr; } — a result that CONTAINS an image gets a two-column layout, one without doesn't. :has() lets a parent's styling react to what's inside it, something no CSS selector could do before it shipped.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

.search-result {
  display: grid;
  gap: 12px;
  padding: 16px 0;
}

.search-result:has(img) {
  grid-template-columns: 80px 1fr;
}

← Previous Next →