セレクターについて改めて勉強し直した③

はじめに

昨日の投稿の続きです。
セレクターについて改めて勉強し直した②

今回も逆引き方式で

親要素の直後の子要素にのみスタイルを適用させたい

HTML

<h1>テスト</h1>
<p>テスト1</p>
<p>テスト2</p>

CSS

h1 + p {}

h1要素の直後のp要素にのみスタイルが適用される。2つめのp要素にはスタイルが適用されない。

要素名は違うけどクラス名が同じ場合

HTML

<p class="section">テスト</p>
<h1 class="section">テスト</h1>

CSS

p.section {}
h1.section {}

.クラス名の前に要素名を入れる。
いや、そもそも同じクラス名を付けない方がいいって話ですね。