[CSS]階層構造で一般兄弟結合子のサンプル

2022年6月24日

構文
セレクタ1 ~ セレクタ2
一般兄弟結合子 (general sibling combinator, ~) は 2 個のセレクターを結びつけ、

1 つ目の要素の後に 2 つ目の要素のがあり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。
セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素が対象になります。
セレクタを~で区切って並べた場合、一般兄弟セレクタになります。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
 .cft .tA ~ .tB {
    color: green;
    background-color:skyblue;
  }
</style>
</head>
<body>

<div class="cft">
  <p class="tA">tokyo</p>
  <p class="tB">oosaka</p>
  
  <p class="tA">fukuoka</p>
  <p>テスト111</p>
  <p class="tB">yokohama</p>
</div>
</body>
</html>

結果
セレクタ1(.tA)の直後にセレクタ2(.tB)があるのでセレクタ2(.tB)要素「oosaka」、yokohama「」にCSSが適用されます。

CSS

Posted by arkgame