Sibling rules in CSS

Difference between all the siblings and next sibling rule.

by jshacker

HTML

<h3>Heading</h3>
<p>I tell things related to heading above.</p>
<p>I should not be selected.</p>
<p>So shouldn't I be selected.</p>
<h3>Heading</h3>
<p>I tell things related to heading above.</p>
<p>I should not be selected.</p>
<h3>Heading</h3>
<p>I tell things related to heading above.</p>
<p>I should be selected.</p>
<h3>Heading</h3>
<p>I tell things related to heading above.</p>

CSS

h3 ~ p {
  /* this selects all the sibling p after h3. */
  color: red;
}

h3 + p {
  /* This will apply to the p that is right next to h3. */
  color: maroon;
}