CSSど初心者なのですが、孫セレクタってないのかな…と無意味に悩んだのでメモっておきます。
「CSS 孫セレクタ」「CSS セレクタ 孫」的な検索をかけると、サジェストにワードが出るのに検索結果にそれっぽい内容の記事が一切ヒットしない！
子孫セレクタについてのページばっかりヒットします。
この記事がヒットするようになったらいいですね。
孫セレクタ＝子セレクタ＋全称セレクタ＋子セレクタ
全称セレクタ「*」を子セレクタふたつの間に挟むことで、孫セレクタ…ではないですが同じ働きをさせるセレクタを書くことができます。
html
<html>
<head></head>
<body>
親要素
<div>
子要素
<div class="youso">孫要素</div>
<div><div class="youso">関係ない要素</div></div>
</div>
</body>
</html>
css
/* ふつうの子セレクタ */
body > div {
background-color: orange;
}
/* 孫セレクタ…と同じ意味のセレクタ */
body > * > div.youso {
background-color: red;
}
以下のスクショのようになります。
ちょうど孫にだけスタイルが適用されていて狙い通り！
まとめ
初心者はとんでもない発想をしがち
追記：>は正確にはセレクタではない
">"は「子結合子」、" "は「子孫結合子」と呼びます。
">" や " " 単体では何かをセレクトできる訳ではないので、セレクタではありません。
（そんな細かいところまでわからない時期に書いた記事なので…）
今回の場合、「孫結合子」って書くのが適切なのかも…？
とはいえ、セレクタって書いた方がわかりやすいので記事はこのままにしておきます。
初心者向けの記事ですし、初心者っぽいタイトルのままの方が目につきやすそう。