CSS Combinators (CSS advanced selectors)

CSS Combinators join several different selectors into new and more capable of targeting a portion of the document.

There are 4 types of combinators

1. Descendant selector

Descendant selector in CSS which matches all child elements that are descendants of the parent element. Descendant selector including elements that are not only direct descendants. These element may be a child, grandchild, great grandchild, and so on.

A descendant selector is made up of two or more selectors separated by white space.

p em { color: #FF0066; }

The above code tells the browser to select all em elements that are descendants of p elements to apply the rule. The other em elements in the page will not be selected by this rule.

It is also possible to nest descendant selectors in several layers deep.

div p em { color: #FF0066; }

HTML Source

<html>
  <head>
    <style type="text/css">
      p em { color: #FF0066; }
    </style>
  </head>
  <body>
    <p>This paragraph include <em>descendant</em> selector </p>
    This line not include <em>descendant</em> selector
  </body>
</html>

output

2. Child Selector (CSS Direct Child Selector)

A child selector is similar to a descendant selector, but it targets only the direct children of a given element. That means it matches all elements that are the immediate children of a specified element. The special character used in child selector is the > (greater than) sign.

p > em { color: #FF0066; }

Read right to left, the selector p > em translates as, selects any em element that is an immediate child of a p element.

<html>
  <head>
    <style type="text/css">
      div ol > li strong {color: #FF0066;}
    </style>
  </head>
  <body>
    <ol>
      <li>The strong text here is <strong>not</strong> change the color.</li>
    </ol>
    <div>
      <ol>
        <li>next is direct child ..
          <ul>
            <li>The strong text here <strong>is changed</strong> the color.</li>
          </ul>
        </li>
      </ol>
    </div>
  </body>
</html>

output

3. Adjacent Sibling Selector (CSS Next Sibling Selector)

The Adjacent Sibling Selector selects an element`s next sibling, that is it allows you to select an element that is directly after another specific element. The special character used in Adjacent Sibling selector is the + (plus) character.

div + p {color: #FF0066;}

Above CSS code states that all paragraph elements that are directly after a < div > is #FF0066 color.

<html>
  <head>
    <style type="text/css">
      div + p {color: #FF0066;}
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Next Paragraph</p>
    <div> Div section </div>
    <p> Paragraph after Div</p>
  </body>
</html>

output

General Sibling Selectors

The general sibling selector in CSS is almost similar to the adjacent sibling selector. The difference is that it select any element that follows another element , it does not need to be the directly preceding element, can appear anywhere after it. The special character used in Adjacent Sibling selector is the ~ (tilde) character.

p ~ h1 {color: #FF0066;}

Above code states that all h1 elements that are anywhere after < p > is #FF0066 color.

<html>
  <head>
    <style type="text/css">
      p ~ h1 {color: red;}
    </style>
  </head>
  <body>
    <h1>Heading </h1>
    <p>Paragraph after heading 1</p>
    <h1>Heading 2</h1>
    <p>Paragraph after heading 2</p>
    <h1>Heading 2</h1>
  </body>
</html>

output

From the above image, you can understand how the General Sibling Selectors styles the HTML document.