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.

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 adjacent 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 an adjacent sibling of the <h1> so we can select it with h1 + p.

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