CSSセレクタで次の要素の指定のしかた

CSSセレクタでは主に子要素、子孫要素への指定です。

それ以外にも「次の要素」を指定することもできます。

CSSセレクタで次の要素の指定のしかたを解説します。

次の要素の指定「+」

CSSセレクタで次の要素つまり弟要素を指定するには「+」を使います。この「+」は隣接セレクタと呼びます。

下記は一番目の要素に「class="example"」を付けています。

この次の要素を指定するためには「.example + ○○」と指定します。

○○にはその要素のhtmlタグなどセレクタを指定しましょう。

<style>
.example + li{
    color: red;
}
</style>
<ul>
    <li class="example">この要素の…</li>
    <li>次の要素</li>
    <li>最後の要素</li>
</ul>

「次の要素」のセレクタを特に指定せず「次の要素がなんであろうと」指定したいのであれば「*」を使いましょう。

<style>
.example2 + *{
    color: red;
}
</style>
<ul>
    <li class="example2">この要素の…</li>
    <li>次の要素</li>
    <li>最後の要素</li>
</ul>

「+」の使い方や具体例について詳しくはこちら↓