【CSS】「後続兄弟結合子」について解説！【subsequent sibling combinator】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「後続兄弟結合子」について解説します。

「後続兄弟結合子」って何？？

このような方が対象です。

また、下の動画でも「後続兄弟結合子」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそもCSSの「セレクター」とは何か？

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指します。

ふむふむ。

「後続兄弟結合子」とは何か？（subsequent sibling combinator）

h3 ~ p {
    font-size: 16px;
}

「後続兄弟結合子」とはCSSのセレクターを繋げることができる結合子の１つです。

「互いに独立して有効なセレクター同士」を繋げることで、スタイルが当たる範囲を狭めることができます。

記号は「~」チルダを使います。

英語では「subsequent sibling combinator」と呼ばれます。

「後続兄弟結合子」の使い方！

「後続兄弟結合子」を使うことで「同じ親要素を持つ」「1つ目の要素以降の」「全ての２つ目の要素」にスタイルを当てることができます。

※「同じ親要素を持つ」というルールがあるので注意してください！結合子の左右は兄弟要素である必要があります。

「１つ目の要素」ってのは「~」の左側にくる要素のことで、「２つ目の要素」ってのは「~」の右側にくる要素のことです！

実際に使ってみる！

<h2>h2の見出しです。</h2>
<p>段落です。</p>
<p>段落です。</p>
<p>段落です。</p>
<h3>h3の見出しです。</h3>
<p>段落です。</p>
<p>段落です。</p>
<p>段落です。</p>

h3 ~ p {
    font-size: 12px;
    color: blue;
}

「h3」以降の「p」にスタイルが当たっていることが確認できると思います！

また、しっかり「h3」と「p」は「同じ親要素を持つ」兄弟要素です。

「~」後続兄弟結合子はこんな感じで使えるんだね！

こんな時はどうなるの？

基本的な解説はできたと思うのですが「こんな時はどうなるか」というような具体例を挙げてより詳しく解説していこうと思います！

わーい！

他の結合子とも組み合わせて使える！

<h2>h2の見出しです。</h2>
<p>段落です。</p>
<div class="foo">
    <p>段落です。</p>
    <p>段落です。</p>
</div>
<p>段落です。</p>
<p>段落です。</p>
<h3>h3の見出しです。</h3>
<p>段落です。</p>
<div class="foo">
    <p>段落です。</p>
    <p>段落です。</p>
</div>
<p>段落です。</p>
<p>段落です。</p>

h3 ~ .foo p {
    font-size: 16px;
    color: blue;
}
.foo {
    padding-left: 30px;
    border: 2px solid #333;
}

このような場合はまず「~」の「すぐ左とすぐ右」を見ます。

すると「h3 ~ .foo」となっています。ここが兄弟要素であって、「h3以降の.foo」というような意味になります。

そして次に、選ばれた「.foo」の中の「p」にスタイルが当たる、という状況です。

このように、まず「~」のすぐ左右の要素だけで考えて、それから「さらに右に続く要素も考える」という順番で考えてください。

使用例その２！

<h2>h2の見出しです。</h2>
<h3>h3の見出しです。</h3>
<p>段落です。</p>
<h2>h2の見出しです。</h2>
<div class="hoge">
    <p>段落です。</p>
    <div class="foo">
        <p>段落です。</p>
        <p>段落です。</p>
    </div>
    <h3>h3の見出しです。</h3>
    <p>段落です。</p>
    <p>段落です。</p>
    <h3>h3の見出しです。</h3>
    <p>段落です。</p>
    <div class="foo">
        <p>段落です。</p>
        <p>段落です。</p>
    </div>
    <p>段落です。</p>
    <p>段落です。</p>
</div>

.hoge h3 ~ .foo p {
    font-size: 16px;
    color: blue;
}
.hoge {
    padding: 10px;
    border: 2px solid pink;
}
.foo {
    padding-left: 30px;
    border: 2px solid #333;
}

「.hoge h3 ~ .foo p」のようなセレクターの場合はどうなるか？を考えていきます。

まず左から順番に考えていきます。なので「.hoge」の中の要素に絞ります。

そしてその中の「h3」と「.foo」を考えます。これは先ほどと一緒です。「h3と.foo」は兄弟要素になります。

そして、最後に選ばれた「.foo」の中の「p」にスタイルが当たるという感じになります。

こんな感じで順番に１つずつ考えていけば、どの要素にスタイルが当たるのか見えてくると思うので、少し複雑になりましたが、細かくして考えてけばOKです！！

上の例でも使われている「子孫結合子」などについては僕の下記の記事で解説していますので、気になる方はこちらからどうぞ！

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#general-sibling-combinators

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/Subsequent-sibling_combinator

あわせて読みたい記事。

まとめ

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指す。

「後続兄弟結合子」とはCSSのセレクターを繋げることができる結合子の１つ。

記号は「~」チルダを使う。

英語では「subsequent sibling combinator」と呼ばれる。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも「後続兄弟結合子」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！