Let’s go deep into CSS combinators, which define relationships between selectors. They help you target elements based on their position relative to others.

What Are CSS Combinators?

Combinators are symbols or keywords between selectors that describe the relationship between them.

There are 4 types of combinators in CSS:

Combinator	Symbol	Relationship Type
Descendant	(space)	Selects all nested children (any level deep)
Child	>	Selects direct children only
Adjacent sibling	+	Selects next sibling only
General sibling	~	Selects all next siblings

Descendant Combinator ( – space)

Selects all elements inside another element, no matter how deeply nested.

div p {
  color: blue;
}

Example:

<div>
  <section>
    <p>This will be blue</p>
  </section>
</div>

Child Combinator (>)

Selects only the immediate children of an element.

ul > li {
  list-style-type: square;
}

Example:

<ul>
  <li>Square</li> <!-- ✅ gets styled -->
  <ul>
    <li>Not square</li> <!-- ❌ not styled (not direct child of first ul) -->
  </ul>
</ul>

Adjacent Sibling Combinator (+)

Selects the element that comes immediately after a specified element (same parent).

h2 + p {
  margin-top: 0;
}

Example:

<h2>Title</h2>
<p>Paragraph right after h2</p> <!-- ✅ styled -->
<p>Another paragraph</p>       <!-- ❌ not affected -->

General Sibling Combinator (~)

Selects all siblings that follow the given element (not just the next one).

h2 ~ p {
  color: grey;
}

Example:

<h2>Heading</h2>
<p>First para</p>   <!-- ✅ -->
<p>Second para</p>  <!-- ✅ -->

Combining Combinators

You can chain multiple combinators for powerful selections:

article > section p + span {
  font-weight: bold;
}

Meaning:

• Find a <span> that comes right after a <p>
• That <p> must be inside a <section>
• That <section> must be a direct child of <article>

Use Cases Summary

Use Case	Selector	Meaning
Style all buttons in a nav	nav button	All buttons inside nav
Style direct list items only	ul > li	Immediate li children only
Style label directly after input	input + label	Label that comes immediately after input
Style all paragraphs after h1	h1 ~ p	All p siblings after h1

🧠 Pro Tip

Using more specific combinators often improves performance and maintainability, because the browser can resolve styles faster, and developers can understand intent better.