CSS 一般兄弟結合子(一般兄弟セレクタ)のサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
セレクタ1 ~ セレクタ2
セレクタを~で区切って並べた場合、一般兄弟セレクタになります。 セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素が対象になります。
一般兄弟結合子 (general sibling combinator, ~) は 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」と文字「444」の段落の文字色(red)、背景色(skyblue)になります。