CSS 階層構造に兄弟で弟を指定するサンプル
環境
Google Chrome 111.0.5563.111（Official Build） （64 ビット）
Windows 10 Home 64bit
書式
セレクタ1 + セレクタ2
セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素が対象になります。
セレクタを+で区切って並べた場合、隣接セレクタになります。
セレクタを+で区切って並べた場合、隣接セレクタになります。
セレクタを+で区切って並べた場合、隣接セレクタになります。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
.cft .pA + .pB {
color: blue;
}
</style>
</head>
<body>
<div class="cft">
<p class="pA">東京tokyo</p>
<p class="pB">大阪oosaka</p>
<p class="pA">横浜yokohama</p>
<p>テスト</p>
<p class="pB">福岡fukuoka</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cft .pA + .pB {
color: blue;
}
</style>
</head>
<body>
<div class="cft">
<p class="pA">東京tokyo</p>
<p class="pB">大阪oosaka</p>
<p class="pA">横浜yokohama</p>
<p>テスト</p>
<p class="pB">福岡fukuoka</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cft .pA + .pB {
color: blue;
}
</style>
</head>
<body>
<div class="cft">
<p class="pA">東京tokyo</p>
<p class="pB">大阪oosaka</p>
<p class="pA">横浜yokohama</p>
<p>テスト</p>
<p class="pB">福岡fukuoka</p>
</div>
</body>
</html>
結果
セレクタ1(.pA)の直後にセレクタ2(.pB)があるのでセレクタ2(.pB)にCSS(文字が青)が適用されます。