← Back to Chapters

CSS Combinators

? CSS Combinators

⚡ Quick Overview

CSS combinators let you select elements based on their relationship in the HTML tree. Instead of styling elements one by one, you describe how elements are nested or placed next to each other, which makes your styles more powerful and efficient.

? Key Concepts

  • Descendant combinator (A B): selects any element B inside A, at any depth.
  • Child combinator (A > B): selects only B elements that are direct children of A.
  • Adjacent sibling combinator (A + B): selects the very next B that comes right after A.
  • General sibling combinator (A ~ B): selects all B siblings that come after A on the same level.

? Syntax / Theory

These are the four main combinators you will use in CSS selectors:

? View Code Example 
/* Basic CSS combinator syntax overview */
div p {
color: blue;
}
ul > li {
font-weight: bold;
}
h3 + p {
color: red;
}
h3 ~ p {
font-style: italic;
}

? Explanation

  • div p → any <p> nested inside a <div>.
  • ul > li → only <li> that are direct children of a <ul>.
  • h3 + p → only the first <p> immediately after an <h3>.
  • h3 ~ p → all <p> siblings after an <h3> at the same level.

1️⃣ Descendant Combinator (space)

The descendant combinator uses a single space: A B. It selects B elements that are anywhere inside A, no matter how deeply nested.

? View Code Example 
/* All <p> elements inside any <div> become blue */
div p {
color: blue;
}

? Live Output Idea

Parent Div

Paragraph inside div (styled)

Paragraph outside div (not styled)

Because the selector is div p, only paragraphs inside a <div> are affected.

2️⃣ Child Combinator (>)

The child combinator uses > and selects only direct children of an element.

? View Code Example 
/* Only direct <li> children of <ul> are styled */
ul > li {
background-color: #28a745;
color: white;
padding: 4px;
}

? Live Output Idea

  • Child 1 (styled)
  • Child 2 (styled)
    • Nested (not styled)

The nested <li> inside the second list item is a grandchild of <ul>, so it is not matched by ul > li.

3️⃣ Adjacent Sibling Combinator (+)

The adjacent sibling combinator (A + B) selects the first sibling B that comes immediately after A.

? View Code Example 
/* Style only the first <p> right after an <h3> */
h3 + p {
font-weight: bold;
color: #dc3545;
}

? Live Output Idea

Heading

Paragraph right after heading (styled)

Another paragraph (not styled)

Only the very next <p> after <h3> matches h3 + p. Any later paragraphs are ignored.

4️⃣ General Sibling Combinator (~)

The general sibling combinator (A ~ B) selects all siblings B that come after A at the same nesting level.

? View Code Example 
/* Style all <p> siblings that come after an <h3> */
h3 ~ p {
color: #6f42c1;
font-style: italic;
}

? Live Output Idea

Heading

First paragraph (styled)

Second paragraph (styled)

Paragraph before heading (would not be matched)

Every <p> that is a later sibling of <h3> is selected by h3 ~ p. Anything that appears before the heading is not affected.

? Tips & Best Practices

  • Use descendant combinators when you want broad, flexible styling inside a container.
  • Prefer child combinators for more precise layouts (like navigation menus and cards).
  • Use sibling combinators for elements that depend on what comes before them (alerts after headings, form errors, etc.).
  • Do not over-nest selectors; keep them short for better readability and performance.
  • Combine combinators with classes (e.g., .card > h2) instead of relying only on element names.

? Practice Tasks

  1. Create a <div class="container"> with several <p> tags inside and outside it. Use .container p to style only the paragraphs inside.
  2. Build a nested list (a <ul> with another <ul> inside one item). Use ul > li to style only the top-level items.
  3. Add multiple paragraphs after an <h2> heading. First, use h2 + p and observe which paragraph gets styled. Then switch to h2 ~ p and note the difference.
  4. Combine combinators: for example, try .card > h3 + p and see how it targets only the first paragraph after a heading inside a card.