CSS: Combinators

Combinators in CSS are special selectors that define relationships between different elements in your HTML document. They are used to target elements based on their position and hierarchy within the document. There are four main types of combinators in CSS:

Descendant Selector (space): This combinator selects all elements that are descendants of a specified element. For example, div p will select all <p> elements inside <div> elements.

Child Selector (>): It selects all elements that are direct children of a specified element. For example, div > p will select all <p> elements that are immediate children of <div> elements.

Adjacent Sibling Selector (+): This combinator is used to select an element that is directly after another specific element. For example, div + p will select the first <p> element that is placed immediately after <div> elements.

General Sibling Selector (~): It selects all elements that are siblings of a specified element. For example, div ~ p will select all <p> elements that are siblings of <div> elements, regardless of whether they are immediately adjacent12.

Here’s a quick example to illustrate how combinators work:

CSS

/* Descendant combinator */
article div p {
  color: blue;
}

/* Child combinator */
article > p {
  color: green;
}

/* Adjacent sibling combinator */
h1 + p {
  color: red;
}

/* General sibling combinator */
h1 ~ p {
  color: orange;
}

In this CSS:

• All <p> elements inside a <div> that is inside an <article> will be blue.
• Only direct child <p> elements of <article> will be green.
• Only the <p> element immediately following an <h1> will be red.
• All <p> elements that are siblings of an <h1> and come after it in the document will be orange.

Combinators are a powerful feature in CSS that allow for more precise and flexible styling of HTML documents.