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

2014年10月20日2022年6月24日

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

1 つ目の要素の後に 2 つ目の要素のがあり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。

セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素が対象になります。

セレクタを~で区切って並べた場合、一般兄弟セレクタになります。

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

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

使用例

<!DOCTYPE html>

<html>

<head>

<style>

.cft .tA ~ .tB {

color: green;

background-color:skyblue;

}

</style>

</head>

<body>

<p class="tA">tokyo</p>

<p class="tB">oosaka</p>

<p class="tA">fukuoka</p>

<p class="tB">yokohama</p>

</div>

</body>

</html>

<!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>

<!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

関連投稿: