How to highlight a paragraph that comes after a heading

A common pattern is to style the first paragraph in an article differently to the ones that come after it. Usually this first paragraph will come right after a heading, and if this is the case in your design you can use that combination of elements to target the paragraph.

CSS has a group of CSS Selectors which are referred to as combinators, because they select things based on a combination of selectors. In our case, we will use the next-sibling combinator. This combinator selects an element based on it being next to another element. In our HTML we have a h1 followed by a <p>. The <p> is the next sibling of the <h1> so we can select it with h1 + p.

<div class="wrapper">
  <h1>A heading</h1>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

.wrapper h1 + p {
  font-weight: bold;
  font-size: 130%;
  color: rebeccapurple;
}

• Learn CSS: Selectors.
• Learn CSS: Combinators.