CSS 空白区切で子孫結合子(子孫セレクタ)を指定するサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
セレクタ1 セレクタ2
セレクタ1を親として、子と孫のセレクタ2の要素が対象になります。
セレクタを空白区切りで並べた場合、子孫セレクタになります。
子孫結合子 (descendant combinator) — 通常は単一の空白文字 (" ") で表される — は 2 つの CSS セレクターを結合し、
1 つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている 2 つ目のセレクターに一致します。
使用例
<!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)になります。