Que signifie le sélecteur CSS ">" (signe plus grand que) ?

Question

Par exemple :

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

Que fait exactement le > Signification du signe ?

Answer 1

> est le combinateur d'enfants parfois appelé par erreur le combinateur des descendants directs. 1

Cela signifie que le sélecteur div > p.some_class ne correspond qu'aux paragraphes de .some_class qui sont imbriqués directement à l'intérieur a div et non les paragraphes qui sont imbriqués plus loin. Cela implique que chaque élément correspondant à div > p.some_class correspond nécessairement aussi div p.some_class avec le combinateur descendant (espace), ce qui explique que les deux soient souvent confondus.

Une illustration comparant le combinateur enfant avec le combinateur descendant :

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>

Quels éléments sont mis en correspondance par quels sélecteurs ?

1. Correspondant aux deux div > p.some_class et div p.some_class
   Ce site p.some_class est situé directement à l'intérieur de la div et une relation parent-enfant est donc établie entre les deux éléments. Puisque "child" est un type de "descendant", tout élément enfant est par définition également un descendant. Par conséquent, les deux règles sont appliquées.

2. Correspondant uniquement à div p.some_class
   Ce site p.some_class est contenu par un blockquote au sein de la div plutôt que le div même. Bien que cette p.some_class est un descendant de la div il ne s'agit pas d'un enfant, mais d'un petit-enfant. Par conséquent, seule la règle comportant le combinateur descendant dans son sélecteur est appliquée.

---

1 _{Beaucoup de gens vont plus loin en l'appelant "enfant direct" ou "enfant immédiat", mais c'est complètement inutile (et incroyablement ennuyeux pour moi), car un élément enfant <strong>est immédiate <em>par définition </em></strong>de toute façon, donc ils signifient exactement la même chose. Il n'existe pas d'"enfant indirect".}

Answer 2

Comme d'autres l'ont mentionné, c'est un sélecteur d'enfant. Voici le lien approprié.

http://www.w3.org/TR/CSS2/selector.html#child-selectors

Answer 3

Il correspond p éléments avec la classe some_class qui sont directement sous un div .

Answer 4

Tous p balises avec classe some_class qui sont les enfants directs d'un div étiquette.

Answer 5

Html

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

css

div > p.some_class{
    color:red;
}

Tous les enfants directs qui sont <p> avec .some_class se verraient appliquer le style.