web-dev-qa-db-fra.com

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

Par exemple:

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

Que signifie exactement le signe >?

csscss-selectors
447
Misha Moroshko

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

Cela signifie que le sélecteur div > p.some_class ne sélectionne que les paragraphes de .some_class qui sont imbriqués directement à l'intérieur d'une div, et non tous les paragraphes qui sont imbriqués plus loin dans.

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é
    Ce p.some_class est situé directement à l'intérieur de la div, une relation parent-enfant est donc établie entre les deux éléments.

  2. Non sélectionné
    Ce p.some_class est contenu par un blockquote dans le div, plutôt que par le div lui-même. Bien que ce p.some_class soit un descendant de div, ce n'est pas un enfant; c'est un petit-fils.

    Par conséquent, bien que div > p.some_class ne corresponde pas à cet élément, div p.some_class utilisera plutôt le combinateur descendant .

1Beaucoup de gens vont plus loin en l'appelant "enfant direct" ou "enfant immédiat", mais c'est complètement inutile (et incroyablement ennuyant pour moi), car un élément enfant est immédiat par définition de toute façon, ils signifient donc exactement la même chose. Il n'y a pas une telle chose comme un "enfant indirect".

637
BoltClock

> (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 y a quatre combinateurs différents dans CSS3:

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

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

enter image description here

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>

Sortie:

enter image description here

Plus d'informations sur les combinateurs CSS

32
Premraj

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

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

11
Dagg Nabbit

Il fait correspondre les éléments p à la classe some_class qui sont directement sous un div.

7
dan04

Toutes les balises p de classe some_class qui sont les enfants directs d'une balise div.

2
tschaible

(sélecteur d'enfants) a été introduit dans css2. div p {} sélectionne tous les p éléments décédants des éléments div, tandis que div> p sélectionne uniquement les éléments enfants p, et non pas grand-enfant, 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 et leur utilisation, consultez mon blog, sélecteurs css et sélecteurs css

1
Avinash Malhotra
<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>

div > p.some_class{
    color:red;
}

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

1
suraj rawat