Complex Selectors - Part2

Sibling Selectors

Knowing how to select children of an element is largely beneficial, and quite commonly seen. However sibling elements, those elements that share a common parent, may also need to be selected. These sibling selections can be made by way of the general sibling and adjacent sibling selectors.

General Sibling Selector

The general sibling selector allow elements to be selected based on their sibling elements, those which share the same common parent. They are created by using the tilde character, ~, between two elements within a selector. The first element identifies what the second element shall be a sibling with, and both of which must share the same parent.

The h2 ~ p selector is a general sibling selector that looks for p elements that follow, and share the same parent, of anyh2 elements. In order for a p element to be selected it must come after any h2 element.

The paragraphs on lines 5 and 9 are selected as they come after the heading within the document tree and share the same parent as their sibling heading, thus are selected and marked in bold.

CSS

h2 ~ p {...}

HTML

<p>...</p>
<section>
  <p>...</p>
  <h2>...</h2>
  <p>...</p>
  <div>
    <p>...</p>
  </div>
  <p>...</p>
</section>

Adjacent Sibling Selector

Occasionally a little more control may be desired, including the ability to select a sibling element that directly follows after another sibling element, which is where the adjacent sibling element comes in. The adjacent sibling selector will only select sibling elements directly following after another sibling element. Instead of using the tilde character, as with general sibling selectors, the adjacent sibling selector uses a plus character, +, between the two elements within a selector. Again, the first element identifies what the second element shall directly follow after and be a sibling with, and both of which must share the same parent.

Looking at the adjacent sibling selector h2 + p only p elements directly following after h2 elements will be selected. Both of which must also share the same parent element.

The paragraph on line 5 is selected as it directly follows after its sibling heading along with sharing the same parent element, thus selected and marked in bold.

CSS

h2 + p {...}

HTML

<p>...</p>
<section>
  <p>...</p>
  <h2>...</h2>
  <p>...</p>
  <div>
    <p>...</p>
  </div>
  <p>...</p>
</section>

Sibling Selectors Example

HTML

<input type="checkbox" id="toggle">
<label for="toggle">☰</label>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

input {
  display: none;
}
label {
  background: #f5f5f5;
  background: linear-gradient(#fff, #eee);
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
}
label:hover {
  color: #f7941d;
}
input:checked + label {
  background: #f5f5f5;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #8c9198;
}
nav {
  max-height: 0;
  overflow: hidden;
  transition: all .2s linear;
}
input:checked ~ nav {
  max-height: 500px;
}

Demo

☰

Sibling Selectors Overview

Example	Classification	Explanation
h2 ~ p	General Sibling Selector	Selects an element that follows anywhere after the prior element, in which both elements share the same parent
h2 + p	Adjacent Sibling Selector	Selects an element that follows directly after the prior element, in which both elements share the same parent