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
source

673

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

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:

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.
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.

¹ _{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
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:

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

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

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:

Plus d'informations sur les combinateurs CSS

— Premraj
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
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
source

5

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

— tschaible
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
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
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
source