Grouping and Combining Selectors

Single selectors are powerful, but CSS also lets you target multiple elements at once and target elements based on where they sit in the HTML tree. These techniques reduce repetition and give you precise control over component styling.

Grouping selectors

When multiple selectors share the same declarations, you can group them with commas to avoid repeating yourself.

/* Without grouping — repetitive */
h1 {
  color: #2c4a1e;
  font-family: Georgia, serif;
}

h2 {
  color: #2c4a1e;
  font-family: Georgia, serif;
}

h3 {
  color: #2c4a1e;
  font-family: Georgia, serif;
}

/* With grouping — concise */
h1, h2, h3 {
  color: #2c4a1e;
  font-family: Georgia, serif;
}

Each selector in the group is independent. h1, h2, h3 {} is exactly the same as writing three separate rules — just shorter.

You can mix selector types in a group:

h2, .section-title, #page-heading {
  font-weight: bold;
}

Combinators

Combinators define relationships between selectors. They let you target elements based on their position in the HTML tree.

Descendant combinator (space)

The descendant combinator — written as a space between two selectors — targets elements that are anywhere inside the first element, at any nesting depth.

nav a {
  color: #f5f0eb;
  text-decoration: none;
}

This targets every <a> inside a <nav>, whether it is a direct child or nested several levels deep.

<nav>
  <a href="/">Home</a>          <!-- targeted -->
  <ul>
    <li><a href="/tours">Tours</a></li>   <!-- also targeted -->
  </ul>
</nav>

The descendant combinator is the most commonly used combinator in real stylesheets.

Child combinator (>)

The child combinator targets elements that are direct children only — not deeper descendants.

section > h2 {
  border-bottom: 2px solid #2c4a1e;
}

This styles <h2> elements that are immediate children of a <section>. An <h2> nested inside a <div> inside the <section> would not be targeted.

<section>
  <h2>Popular Tours</h2>         <!-- targeted -->
  <div>
    <h2>Sub-section</h2>         <!-- NOT targeted -->
  </div>
</section>

Use the child combinator when you need to avoid accidentally styling nested elements of the same type.

Adjacent sibling combinator (+)

The adjacent sibling combinator targets an element that immediately follows another element at the same level.

h2 + p {
  font-size: 1.1rem;
  color: #555;
}

This styles the first <p> that directly follows an <h2>. Only the adjacent sibling is targeted — not all paragraphs after it.

<h2>Popular Tours</h2>
<p>These are our most-booked adventures.</p>    <!-- targeted -->
<p>Check availability for your dates.</p>        <!-- NOT targeted -->

General sibling combinator (~)

The general sibling combinator targets all siblings after a given element at the same level.

h2 ~ p {
  margin-left: 1rem;
}

This styles every <p> that follows an <h2> as a sibling — not just the first one.

Which combinators you will use most

In practical CSS, the descendant combinator is by far the most common. It handles most component styling needs:

.tour-card h3 { }        /* headings inside tour cards */
.site-nav a { }          /* links in the nav */
footer p { }             /* paragraphs in the footer */

The child combinator is useful when descendant is too broad and would accidentally catch nested elements.

The sibling combinators (+ and ~) appear occasionally — useful for styling content that follows headings or for spacing between form elements.

Exercise

Use combinators to refine your Summit Trail Outfitters stylesheet:

1. Descendant — Style navigation links differently from body links:

.site-nav a {
  color: #f5f0eb;
  text-decoration: none;
  font-weight: bold;
}

footer a {
  color: #b8d4a0;
}

2. Descendant — Style headings specifically inside tour cards:

.tour-card h3 {
  color: #2c4a1e;
  font-size: 1.25rem;
  margin-top: 0;
}

3. Child combinator — Target only direct <p> children of <article> elements (not paragraphs in nested elements):

article > p {
  color: #444;
  font-size: 0.95rem;
}

Open the browser and confirm only the intended elements are styled. If the style is applying somewhere unexpected, the descendant combinator may be reaching too deep — switch to the child combinator.

Recap

• Group selectors with commas (h1, h2, h3 {}) to share declarations across multiple targets.
• The descendant combinator (space) targets any matching descendant at any depth.
• The child combinator (>) targets only direct children.
• The adjacent sibling (+) targets the element immediately following another.
• The general sibling (~) targets all following siblings.
• In practice: use the descendant combinator most; reach for > when you need to exclude nested matches.