CSS　隣接兄弟結合子(隣接セレクタ)のサンプル

2022年11月7日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
セレクタ名1 + セレクタ名2
セレクタを+で区切って並べた場合、隣接セレクタになります。
隣接兄弟結合子 (adjacent sibling combinator, +) は 2 つのセレクターを接続し、
2 つ目の要素が 1 つ目の要素の直後にあって、両者が同じ親要素の子同士である場合に一致します。
セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素が対象になります。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
 /*隣接セレクタ*/
  .cft .pA + .pB {
    color: red;
    background-color:skyblue;
  }
</style>
</head>
<body>

<div class="cft">
  <p class="pA">111</p>
  <p class="pB">222</p>

  <p class="pA">333</p>
  <p>test data</p>
  <p class="pB">444</p>
</div>

</body>
</html>

結果
文字「222」の文字色(red)、背景色(skyblue)になります。

CSS

Posted by arkgame

関連記事: