CSS Combinators

CSS Combinators Explained: Selector Relationships

CSS combinators are used to define the relationship between the selectors, allowing you to target elements based on their position in the HTML structure relative to other elements.

There are four main types of CSS combinators:

1. Descendant Combinator ( – space)

The descendant combinator selects all elements that are descendants of a specified element.

Syntax:

selectorA selectorB { /* styles */ }

Example:

<style>
  div p {
    color: blue;
  }
</style>

<div>
  <p>This paragraph will be blue.</p>
</div>

Try It Now

In this example, all <p> elements inside a <div> will be styled.

2. Child Combinator (> – greater than sign)

The child combinator selects all elements that are a direct child of a specified element.

Syntax:

selectorA > selectorB { /* styles */ }

Example:

<style>
  div > p {
    color: green;
  }
</style>

<div>
  <p>This paragraph will be green.</p>
  <span>
    <p>This paragraph will not be green.</p>
  </span>
</div>

Try It Now

Only <p> elements that are direct children of a <div> will be styled.

3. Adjacent Sibling Combinator (+ – plus sign)

The adjacent sibling combinator selects an element that is immediately preceded by a specified element.

Syntax:

selectorA + selectorB { /* styles */ }

Example:

<style>
  h1 + p {
    color: red;
  }
</style>

<h1>Heading</h1>
<p>This paragraph will be red.</p>
<p>This paragraph will not be red.</p>

Try It Now

Only the <p> element immediately following an <h1> will be styled.

4. General Sibling Combinator (~ – tilde)

The general sibling combinator selects all elements that are siblings of a specified element.

Syntax:

selectorA ~ selectorB { /* styles */ }

Example:

<style>
  h1 ~ p {
    color: purple;
  }
</style>

<h1>Heading</h1>
<p>This paragraph will be purple.</p>
<p>This paragraph will also be purple.</p>

Try It Now

All <p> elements that are siblings of an <h1> will be styled.

Practical Example

Here is a complete example demonstrating all four combinators:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Combinators Example</title>
  <style>
    /* Descendant Combinator */
    div p {
      color: blue;
    }

    /* Child Combinator */
    div > p {
      font-weight: bold;
    }

    /* Adjacent Sibling Combinator */
    h1 + p {
      font-style: italic;
    }

    /* General Sibling Combinator */
    h1 ~ p {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div>
    <p>This is a descendant of div.</p>
    <span>
      <p>This is a child of span, not div.</p>
    </span>
  </div>
  <h1>Header</h1>
  <p>This paragraph is adjacent to h1 and will be italic and underlined.</p>
  <p>This paragraph is a sibling of h1 and will be underlined.</p>
</body>
</html>

Try It Now

When to Use Each Combinator:

  • Descendant Combinator: When you want to style nested elements.
  • Child Combinator: When you need to target only direct children, ensuring more specificity.
  • Adjacent Sibling Combinator: For styling an element that immediately follows another.
  • General Sibling Combinator: When styling all sibling elements that follow a specified element.

Using the right combinator can help streamline your CSS and make stylesheets more efficient and easier to maintain.