Overview

Selector | Description | —————–– | ———– |div span | Descendant selector (all <span>s that are descendants of a <div>) |div > span | Child selector (all <span>s that are a direct child of a <div>) |a ~ span | General Sibling selector (all <span>s that are siblings after an <a>) |a + span | Adjacent Sibling selector (all <span>s that are immediately after an <a>) |

Note: Sibling selectors target elements that come after them in the source document. CSS, by its nature (it cascades), cannot target previous or parent elements. However, using the flex order property, a previous sibling selector can be simulated on visual media.

Descendant Combinator: selector selector

A descendant combinator, represented by at least one space character (``), selects elements that are a descendant of the defined element. This combinator selects all descendants of the element (from child elements on down).

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

Live Demo on JSBin

In the above example, the first two <p> elements are selected since they are both descendants of the <div>.

Child Combinator: selector > selector

The child (\\>) combinator is used to select elements that are children, or direct descendants, of the specified element.

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

Live Demo on JSBin

The above CSS selects only the first <p> element, as it is the only paragraph directly descended from a <div>.

The second <p> element is not selected because it is not a direct child of the <div>.

Adjacent Sibling Combinator: selector + selector

The adjacent sibling (\\+) combinator selects a sibling element that immediate follows a specified element.