[解決済み] CSSセレクタの">"（大なり小なり）とはどういう意味ですか？

質問

例えば

div > p.some_class {
  /* Some declarations */
}

は具体的にどのようなものなのでしょうか？ > の記号はどういう意味ですか？

どのように解決するのですか？

> は 子コンビネーター 直下型コンビネータと間違われることもある。 ¹

つまり、セレクタ div > p.some_class の段落にのみマッチします。 .some_class がネストしている場合 の中に直接 a div であり、さらにその中に入れ子になっている段落は含まれない。このことは div > p.some_class にも必然的にマッチします。 div p.some_class を使用すると 子孫コンビネータ (スペース)であるため、当然のことながら両者はしばしば混同されます。

子コンビネーターと子孫コンビーネーターの比較図。

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>

どの要素がどのセレクタにマッチするか？

1. の両方にマッチします。 div > p.some_class と div p.some_class
   これは p.some_class の中に直接入っています。 div 従って、両要素の間に親子関係が成立する。child" は "descendant" の一種であるため、子要素は定義上、子孫でもあるのです。従って、両方のルールが適用されます。

2. のみでマッチングされます。 div p.some_class
   これは p.some_class が含まれています。 blockquote の中で div よりも、むしろ div そのものです。しかし、この p.some_class の子孫である。 div これは子ではなく、孫にあたります。したがって、セレクタにdescendant combinatorを含むルールだけが適用されます。

¹ <サブ 多くの人は、これを「直接の子」または「即時の子」と呼びますが、これはまったく不要です（そして、私にとっては信じられないほど迷惑な話です）。 は即時 定義上 ということで、全く同じ意味です。間接子などというものは存在しないのです。