">" (大なり記号) CSS セレクターは何を意味しますか? 質問する

Question

>それは子コンビネータ、時には誤って直接子孫コンビネータと呼ばれることもあります^。1

つまり、セレクタはの直接ネストされたdiv > p.some_classの段落にのみ一致し、さらにのネストされた段落には一致しません。これは、一致するすべての要素がにも必ず一致することを意味します。.some_classdivdiv > p.some_classdiv p.some_class子孫コンビネータ(スペース)なので、当然ながらこの 2 つはよく混同されます。

子コンビネータと子孫コンビネータを比較した図:

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>

どの要素がどのセレクターに一致するか?

div > p.some_classとの両方に一致しますdiv p.some_class
。これはp.some_classの内側に直接配置されているdivため、両方の要素間に親子関係が確立されます。「子」は「子孫」の一種であるため、子要素はすべて定義上子孫でもあります。したがって、両方のルールが適用されます。
のみに一致しますdiv p.some_class
。これは、自体ではなく、内p.some_classのに含まれています。これはの子孫ですが、子ではなく孫です。したがって、セレクターに子孫コンビネータを持つルールのみが適用されます。blockquotedivdivp.some_classdiv

¹ _{多くの人は、これを「直接の子」または「即時の子」と呼んでいますが、これはまったく不必要です (そして私にとっては非常に迷惑です)。なぜなら、子要素は定義上、いずれにせよ即時であるため、これらはまったく同じことを意味します。「間接の子」というものは存在しません。}

Answer 1