Que signifie le sélecteur CSS «>» (signe supérieur à)?

476

Par exemple:

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

Que signifie exactement le >signe?

css css-selectors Misha Moroshko
la source

Réponses:

673

>est le combinateur enfant , parfois appelé à tort le combinateur descendant direct. 1

Cela signifie que le sélecteur div > p.some_classne sélectionne que les paragraphes .some_classqui sont imbriqués directement dans undiv , et non les paragraphes qui sont imbriqués plus loin à l'intérieur.

Une illustration:

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

Ce qui est sélectionné et ce qui ne l'est pas:

  1. Sélectionné
    Ceci p.some_classest situé directement à l'intérieur du div, donc une relation parent-enfant est établie entre les deux éléments.

  2. Non sélectionné
    Ceci p.some_classest contenu par un blockquotedans le div, plutôt que le divlui - même. Bien que ce p.some_classsoit un descendant de la div, ce n'est pas un enfant; c'est un petit-enfant.

    Par conséquent, alors div > p.some_classqu'il ne correspondra pas à cet élément, div p.some_classil utilisera le combinateur descendant à la place.

1 Beaucoup de gens vont plus loin pour l'appeler "enfant direct" ou "enfant immédiat", mais c'est complètement inutile (et incroyablement ennuyeux pour moi), car un élément enfant est immédiat par définition de toute façon, donc ils signifient exactement la même chose. Un «enfant indirect» n'existe pas.

BoltClock
la source
2
+1 Est-il vraiment appelé un sélecteur d'enfant ? Si c'est le cas, c'est assez trompeur. Je pensais que ce #something aserait un sélecteur d'enfants.
alex
2
@alex: oui :) #something apourrait signifier aest un petit-enfant ou un arrière-petit-enfant #something(il ne prend pas en compte la profondeur d'imbrication).
BoltClock
12
@alex ça s'appelle le combinateur enfant , l'espace s'appelle le combinateur descendant
robertc
33
Quand quelqu'un est l'enfant de leurs grands-parents, nous avons affaire à un cas d'inceste vraiment désagréable. Heureusement, cela est impossible en HTML.
Quentin
8
Je n'entends aucun profane appeler leurs enfants leurs enfants directs par souci de clarté.
BoltClock
41

> (signe supérieur à) est un combinateur CSS.

Un combinateur est quelque chose qui explique la relation entre les sélecteurs.

Un sélecteur CSS peut contenir plusieurs sélecteurs simples. Entre les simples sélecteurs, nous pouvons inclure un combinateur.

Il existe quatre combinateurs différents dans CSS3:

  1. sélecteur descendant (espace)
  2. sélecteur enfant (>)
  3. sélecteur de frère adjacent (+)
  4. sélecteur général de frères et sœurs (~)

Remarque: < n'est pas valide dans les sélecteurs CSS.

entrez la description de l'image ici

Par exemple: 

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Production:

entrez la description de l'image ici

Plus d'informations sur les combinateurs CSS

Premraj
la source
developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…
Lalit Yadav
@premraj Merci pour l'excellente explication des sélecteurs css parent-enfant!
YCode
Qu'est-ce que cela signifie alors lorsque vous obtenez quelque chose comme .entry-content > * {"code" }ce qui est suivi .entry-content {"other code" }? Ne .entry-content > *couvre pas tous les enfants de entry-content?
YCode
14

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

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

Dagg Nabbit
la source
Merci beaucoup pour le lien ! J'y ai également découvert les "Sélecteurs frères adjacents".
Misha Moroshko
Vous trouverez la prise en charge du navigateur sur Sitepoint. Ne fonctionne pas dans IE6 si cela est important pour vos projets, OK partout ailleurs. Cette ressource est esp. utile pour les frères et sœurs
,:
10

Il fait correspondre les péléments avec la classe some_classqui sont directement sous a div.

dan04
la source
5

Toutes les pbalises avec classe some_classqui sont les enfants directs d'une divbalise.

tschaible
la source
4
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_classobtiendraient le style qui leur est appliqué.

suraj rawat
la source
3

(sélecteur d'enfant) a été introduit dans css2. div p {} sélectionne tous les éléments p décédés des éléments div, tandis que div> p sélectionne uniquement les éléments enfant p, pas le petit enfant, l'arrière-grand-enfant, etc.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

Pour plus d'informations sur les lecteurs CSS Ce [et leur utilisation, consultez mon blog, les sélecteurs css et les sélecteurs css3

Avinash Malhotra
la source
0

Le sélecteur de signe supérieur (>) en CSS signifie que le sélecteur de droite est un descendant / enfant direct de tout ce qui se trouve à gauche.

Un exemple:

article > p { }

Signifie uniquement le style d'un paragraphe qui suit un article.

authentichigh
la source