見出しの直後に来た段落を強調表示するには

このガイドでは、見出しの直後にある段落を強調表示する方法を紹介します。

見出しの後にある最初の段落のスタイル設定

よくあるパターンは、記事の最初の段落と、その後に続く段落を異なる形でスタイル設定することです。通常、この最初の段落は見出しの直後に来るので、もしこのようなデザインにするならば、その段落を対象とするためにその要素の組み合わせを使用することができます。

次兄弟結合子

CSS の CSS セレクター のグループには、複数のセレクターを組み合わせて選択することから結合子と呼ばれるものが存在します。この例では、次兄弟結合子を使用することにします。この結合子は、ある要素が他の要素の隣にあることを基準に選択します。HTML は h1 の後に <p> が続いています。<p><h1> の隣接する兄弟要素なので、h1 + p で選択することができます。

html
<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>
css
.wrapper h1 + p {
  font-weight: bold;
  font-size: 130%;
  color: rebeccapurple;
}

関連情報