【CSS】前の要素、次の要素。指定方法のいろいろ

前の要素、次の要素。

次の次の要素。　その他隣接した要素の指定方法のいろいろをご紹介します！

今回の基本のHTML

今回の基本のHTML

<ul>
    <li>前の要素「ネズミ」</li>
    <li class="example">here</li>
    <li>次の要素「うさぎ」</li>
    <li>最後の要素「カメ」</li>
</ul>

次の要素の指定「+」

隣接セレクタ　

となり（隣接）している要素を指定することを隣接セレクタといいます。

まずは、class=”example”の次の要素である「うさぎ」を指定したい場合はこちら。

• 前の要素「ネズミ」
• here
• 次の要素「うさぎ」
• 最後の要素「カメ」

.example + li{
    color: red;
}

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

次の次の要素の指定「+ +」

• 前の要素「ネズミ」
• here
• 次の要素「うさぎ」
• 最後の要素「カメ」

.example1 + li + li{
    color: red;
}

続く全ての要素へ指定「~」

• 前の要素「ネズミ」
• here
• 次の要素「うさぎ」
• 最後の要素「カメ」

.example2 ~ li{
    color: red;
}

次の要素の全てを指定「+ *」

「次の要素」のセレクタを特に指定せず「次の要素がなんであろうと」

指定したいのであれば「*」を使います。

少しhtmlを追加します。

<ul>
    <li>前の要素「ネズミ」</li>
    <li class="example_mores">here</li>
    <li>
      次の要素「うさぎ」
      <ul>
          <li>子要素1</li>
          <li>子要素2</li>
          <li>子要素3</li>
          <li>子要素4</li>
      </ul>
    </li>
    <li>最後の要素「カメ」</li>
</ul>

このように子要素が続くような場合を想定し

次の要素「うさぎ」に続く全ての要素に指定する場合このように記述することができます。

• 前の要素「ネズミ」
• here
• 次の要素「うさぎ」
  • 子要素1
  • 子要素2
  • 子要素3
  • 子要素4
• 最後の要素「カメ」

.example_mores + *{
    color: red;
}

次の要素「うさぎ」に続く全てが対象になりました。

ちなみに、このような指定も可能です。

.example_mores1 + li > *{
    color: red;
}

hereの次の要素の子要素のみを赤に変更

• 前の要素「ネズミ」
• here
• 次の要素「うさぎ」
  • 子要素1
  • 子要素2
  • 子要素3
  • 子要素4
• 最後の要素「カメ」

面白いですね〜！！！

お次はこういうしてもあります！

指定した要素の前を指定「:has()」

:has() に隣接セレクタを適用させることで、特定の要素に対する直前の要素を指定できます。

では「.example_has」の前を指定してみます。

• 前の要素「ネズミ」
  • 子要素1
  • 子要素2
  • 子要素3
  • 子要素4
• here
• 次の要素「うさぎ」
• 最後の要素「カメ」

li:has(+ .example_has) {
    color: red;
}

ここでは、「.example_has」 の前の要素全てが対象となります。

「＋」とは逆に子要素のみに指定したい場合はこのように書きます。

• 前の要素「ネズミ」
  • 子要素1
  • 子要素2
  • 子要素3
  • 子要素4
• here
• 次の要素「うさぎ」
• 最後の要素「カメ」

li:has(+ .example_hasmore) *{
    color: red;
}

※クラスを追加しちゃえばいいじゃん！！と思うかもしれませんが、
あくまでcssで一時的に対処したい場合にもとても便利です！
（もしくは同じような構成のページが鬼のようにある場合・・）

是非活用してみてください〜！

次回は「>」を使った色々を更新します！

お楽しみに・・！！