🪬

css / scss + と ~ について

2024/09/20に公開

はじめに

いまさらcssの隣接兄弟結合子､一般兄弟結合子について知りました｡
css +　や css ~ と検索してもヒットしなかったので投稿します。

ある要素に続くすぐ次の兄弟要素を選択するときに使います。記号は + で表されます。
最初の <p> 要素に続く2つ目以降の <p> 要素だけにスタイルを適用しています。

<article>
    <h1>こんにちは</h1>
    <p>hoge</p>
    <p>fuga</p>
    <p>piyo</p>
</article>

<style>
article p + p {
  color: green;
}
</style>

article p + p が、最初の <p> に隣接する2つ目と3つ目の <p> に緑色の文字色を適用します。1つ目の <p> には適用されません。このように、隣接する兄弟要素にだけスタイルを適用したい場合に便利です。

直接隣接していないが、同じ親要素を持つ全ての兄弟要素を選択する際に使います。記号は ~ で表されます。
<h1> の後に続くすべての <p> 要素にスタイルを適用しています。

<article>
    <h1>こんにちは</h1>
    <p>hoge</p>
    <div>fuga</div>
    <p>piyo</p>
</article>

<style>
article h1 ~ p {
  color: red;
}
</style>

この例では、article h1 ~ p によって、<h1> の後に続くすべての <p> に赤色の文字色を適用します。具体的には、2番目と4番目の <p> が赤くなります。