CSS Combinators

CSS combinators allow you to define relationships between HTML elements, helping you apply styles in a structured way. There are four main combinators that define how selectors interact.

Descendant Selector

Selects all elements inside a specified parent element, regardless of how deeply nested they are.

Syntax:

				
					div p {
    color: white;
    background-color: teal;
}

Example:

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    div p {
      color: white;
      background-color: teal;
    }
  </style>
</head>
<body>

  <div>
    <p>Paragraph 1 inside div</p>
    <section>
      <p>Paragraph 2 inside section inside div</p>
    </section>
  </div>
  <p>Paragraph 3 outside div</p>

</body>
</html>

Both Paragraph 1 and 2 are styled because they are descendants of the div.

Child Selector

Selects only direct children of a specified parent — not nested deeper.

Syntax:

				
					div > p {
    color: wheat;
    background-color: rebeccapurple;
}

Example:

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    div > p {
      color: wheat;
      background-color: rebeccapurple;
    }
  </style>
</head>
<body>

  <div>
    <p>Paragraph 1 (direct child)</p>
    <section>
      <p>Paragraph 2 (nested inside section)</p>
    </section>
  </div>

</body>
</html>

Only Paragraph 1 is styled, because it is a direct child of the div.

Adjacent Sibling Selector

Selects the immediate sibling element that comes right after the specified element.

Syntax:

				
					div + p {
    color: white;
    background-color: seagreen;
}

Example:

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    div + p {
      color: white;
      background-color: seagreen;
    }
  </style>
</head>
<body>

  <div>This is a div</div>
  <p>Paragraph right after div</p>
  <p>Another paragraph (won't be selected)</p>

</body>
</html>

Only the first paragraph after the div gets styled.

General Sibling Selector

Selects all sibling elements of a certain type that come after the specified element.

Syntax:

				
					div ~ p {
    color: black;
    background-color: lightgoldenrodyellow;
}

Example:

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    div ~ p {
      color: black;
      background-color: lightgoldenrodyellow;
    }
  </style>
</head>
<body>

  <div>This is a div</div>
  <p>Paragraph 1 (selected)</p>
  <p>Paragraph 2 (selected)</p>
  <section>
    <p>Paragraph inside section (not selected)</p>
  </section>

</body>
</html>

All <p> tags after the <div> are styled — but only siblings, not deeply nested elements.