見出しの直後に来た段落を強調表示するには
このガイドでは、見出しの直後にある段落を強調表示する方法を紹介します。
見出しの後にある最初の段落のスタイル設定
よくあるパターンは、記事の最初の段落と、その後に続く段落を異なる形でスタイル設定することです。通常、この最初の段落は見出しの直後に来るので、もしこのようなデザインにするならば、その段落を対象とするためにその要素の組み合わせを使用することができます。
次兄弟結合子
CSS の CSS セレクター のグループには、複数のセレクターを組み合わせて選択することから結合子と呼ばれるものが存在します。この例では、次兄弟結合子を使用することにします。この結合子は、ある要素が他の要素の隣にあることを基準に選択します。HTML は h1 の後に <p> が続いています。<p> は <h1> の隣接する兄弟要素なので、h1 + p で選択することができます。
html
<div class="wrapper">
<h1>見出し</h1>
<p>
野菜は体に良いものです。だから、コールラビ、青ネギ、大根、アマランサス、タアサイ、トマティーヨ、メロン、小豆、ニンニクをもっと食べましょう。
</p>
<p>
フダンソウ、ビートの葉、コーン、サトイモの葉、エンダイブ、ウリ。パセリ、エシャロット、ズッキーニ、タアサイ、エンドウの芽、ソラマメ、コラードグリーン、タンポポ、オクラ、ワカメ、トマト。
タンポポ、キュウリ、アースナッツ、ピーナッツ、サトイモの葉、ズッキーニ。
</p>
</div>
css
.wrapper h1 + p {
font-weight: bold;
font-size: 130%;
color: rebeccapurple;
}