「CSS」階層構造で隣接兄弟結合子のサンプル
構文
セレクタ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」になります。