CSS Combinators

❮ Previous Next ❯

A combinator is a way to describe how selectors are related to each other.

In HTML, you can use a CSS selector to choose multiple elements. You can also add something called a "combinator" between these selections.

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

Descendant Selector

The descendant selector is used to select all elements that are inside another specified element..

The next example picks out all the <p> paragraphs within <div> containers:;

Example

div p {
background-color: yellow;
}

Try it Yourself »

Child Selector (>)

The child selector picks out all elements that are directly inside a particular element.

In this example, we're picking all <p> paragraphs inside a <div> box:

Example

div > p {
background-color: yellow;
}

Try it Yourself »

Adjacent Sibling Selector (+)

The adjacent sibling selector picks an element right next to another particular element.

Siblings are elements that share the same parent element, and 'adjacent' simply means 'right next to.

In this example, we're choosing the very first <p> element that comes directly after <div> elements, like this:

Example

div + p {
background-color: yellow;
}

Try it Yourself »

General Sibling Selector (~)

The general sibling selector picks all elements that come right after a particular element.

In this example, we target all <p> elements that come right after <div> elements.

Example

div ~ p {
background-color: yellow;
}

Try it Yourself »

<!DOCTYPE html>
<html>
  <head>
    <style>
      div p {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Descendant Selector</h2>
    <p>The descendant selector selects all elements that are children of a specified element.</p>
    <div>
      <p>Paragraph 1 in the div.</p>
      <p>Paragraph 2 in the div.</p>
      <section>
        <p>Paragraph 3 in the div.</p>
      </section>
    </div>
    <p>Paragraph 4. Not in a div.</p>
    <p>Paragraph 5. Not in a div.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      div>p {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Child Selector</h2>
    <p>The ">" selector picks out all elements that are directly under a particular element.</p>
    <div>
      <p>Paragraph 1 in the div.</p>
      <p>Paragraph 2 in the div.</p>
      <section>
        <!-- not Child but Descendant -->
        <p>Paragraph 3 in the div (inside a section element).</p>
      </section>
      <p>Paragraph 4 in the div.</p>
    </div>
    <p>Paragraph 5. Not in a div.</p>
    <p>Paragraph 6. Not in a div.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      div+p {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Adjacent Sibling Selector</h2>
    <p>The + selector picks an element right after a particular element.</p>
    <p>This example targets the initial paragraph after any div element in the HTML code.</p>
    <div>
      <p>Paragraph 1 in the div.</p>
      <p>Paragraph 2 in the div.</p>
    </div>
    <p>Paragraph 3. After a div.</p>
    <p>Paragraph 4. After a div.</p>
    <div>
      <p>Paragraph 5 in the div.</p>
      <p>Paragraph 6 in the div.</p>
    </div>
    <p>Paragraph 7. After a div.</p>
    <p>Paragraph 8. After a div.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      div~p {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>General Sibling Selector</h2>
    <p>The (~) general sibling selector picks all elements that come right after a specific element.</p>
    <p>Paragraph 1.</p>
    <div>
      <p>Paragraph 2.</p>
    </div>
    <p>Paragraph 3.</p>
    <code>Some code.</code>
    <p>Paragraph 4.</p>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Combinators

Descendant Selector

Example

Child Selector (>)

Example

Adjacent Sibling Selector (+)

Example

General Sibling Selector (~)

Example

Web Development