How to highlight a paragraph that comes after a heading

In this guide you can find out how to highlight a paragraph that comes directly after a heading.

Styling the first paragraph 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.

The next-sibling combinator

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.

See also