CSS 空白区切で子孫結合子(子孫セレクタ)を指定するサンプル

2022年11月7日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
セレクタ1 セレクタ2
セレクタ1を親として、子と孫のセレクタ2の要素が対象になります。

セレクタを空白区切りで並べた場合、子孫セレクタになります。

子孫結合子 (descendant combinator) — 通常は単一の空白文字 (" ") で表される — は 2 つの CSS セレクターを結合し、

1 つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている 2 つ目のセレクターに一致します。

セレクタを空白区切りで並べた場合、子孫セレクタになります。子孫結合子 (descendant combinator) — 通常は単一の空白文字 (" ") で表される — は 2 つの CSS セレクターを結合し、 1 つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている 2 つ目のセレクターに一致します。

セレクタを空白区切りで並べた場合、子孫セレクタになります。
子孫結合子 (descendant combinator) — 通常は単一の空白文字 (" ") で表される — は 2 つの CSS セレクターを結合し、
1 つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている 2 つ目のセレクターに一致します。

使用例

<!DOCTYPE html>

<html>

<head>

<style>

/*子と孫セレクタを指定*/

.cft .pA {

color: red;

background-color:skyblue;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <style> /*子と孫セレクタを指定*/ .cft .pA { color: red; background-color:skyblue; } </style> </head> <body> <div class="cft"> <p class="pA">11</p> </div> <div class="cft"> <div class="test"> <p class="pA">22</p> </div> </div> <p class="pC">33</p> </body> </html>

<!DOCTYPE html>
<html>
<head>
<style>
 /*子と孫セレクタを指定*/
  .cft .pA {
    color: red;
    background-color:skyblue;
  }
</style>
</head>
<body>

<div class="cft">
  <p class="pA">11</p>
</div>

<div class="cft">
  <div class="test">
    <p class="pA">22</p>
  </div>
</div>

<p class="pC">33</p>

</body>
</html>

結果
文字「11」と[22]の文字色(red)、背景色(skyblue)になります。

CSS

Posted by arkgame

関連投稿: