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
.