「CSS」階層構造で隣接兄弟結合子のサンプル

2022年6月24日

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

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .cft .pA + .pB {
    background-color: green;
    color:red
  }
</style>
</head>
<body>

<div class="cft">
  <p class="pA">AA</p>
  <p class="pB">BB</p>

  <p class="pA">CC</p>
  <p>テスト</p>
  <p class="pB">DD</p>
</div>
</body>
</html>

結果
セレクタ1(.pA)の直後にセレクタ2(.pB)があるのでセレクタ2(.pB)文字「BB」にCSSが適用されます。
文字色が「red」、背景色「green」になります。

CSS

Posted by arkgame