Ce qui ne l' “>” (signe supérieur à) sélecteur CSS signifie?

Par exemple:

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

Exactement ce que fait le > signe signifie?

InformationsquelleAutor Misha Moroshko | 2010-07-12

css css-selectors

636

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

Cela signifie que le sélecteur de div > p.some_class ne sélectionne que des paragraphes de .some_class qui sont imbriquées directement à l'intérieur de un div, et pas n'importe paragraphes qui sont imbriquées l'une dans.

Une illustration:
```
<div>
    <p class="some_class">Some text here</p>     
    <blockquote>
        <p class="some_class">More text here</p> 
    </blockquote>
</div>
```
Ce qui est sélectionné et ce n'est pas:
1. Sélectionné
  
  Cette p.some_class est situé directement à l'intérieur de la div, d'où une relation parent-enfant est établi entre les deux éléments.
2. Pas sélectionné
  
  Cette p.some_class est contenue par un blockquote dans le div, plutôt que de la div lui-même. Bien que cette p.some_class est un descendant de la div, ce n'est pas un enfant; c'est un petit-enfant.
  
  Par conséquent, tandis que div > p.some_class ne correspond pas cet élément, div p.some_class va, à l'aide de la descendant du combinator à la place.
¹ _{Beaucoup de gens aller plus loin pour l'appeler "enfant direct" ou "immédiate de l'enfant", mais c'est complètement inutile (et incroyablement ennuyeux pour moi), car un enfant de l'élément est immédiate par définition de toute façon, de sorte qu'ils signifient exactement la même chose. Il n'y a pas une telle chose comme un "indirecte de l'enfant".}
- +1 c'Est vraiment appelé sélecteur d'enfant? Si oui, c'est assez trompeur. Je voudrais de la pensée #something a serait un sélecteur d'enfant.
- href="http://www.w3.org/TR/CSS2/selector.html#child-selectors" >oui 🙂 #something a pourrait signifier a est un petit-enfant ou grand^n petit-fils de #something (il ne tient pas compte de la profondeur d'imbrication).
- Eh bien, je veux dire qu'il est encore un enfant... un petit-enfant, peut-être 😛
- il est appelé le enfant combinator, l'espace est appelé le descendant du combinator
- Si quelqu'un est de leur grand-parent de l'enfant, nous avons affaire à une très mauvaise exemple de l'inceste. Heureusement, ce qui est impossible en HTML.
- Signalement de ce thread sur des soupçons de promotion textuelle de la pédophilie et de l'inceste (blague)
- Ennuyeux ou de ne pas l'appeler un enfant direct il, il est immédiatement clair pour les incultes, je pense que c'est une bonne description.
- Je n'entends aucun profanes appellent leurs enfants leurs enfants directs par souci de clarté.
- Le terme "direct" est assez déroutant. Dans d'autres cela signifie "ne pas par l'intermédiaire d'un sibbling ou similaire". Ce n'est pas quelque chose pour le HTML (sauf si vous considérez les éléments qui sont mus par JS, un compte CSS ne pas s'en soucier).
- C'est vrai. Peut-être "immédiate" est plus approprié ici. Je ne peux pas penser à une bonne alternative à un peu "enfant", mais les gens semblent insistant sur l'amalgame entre "enfant" et "descendant"...
- Peut-être "l'enfant du combinator, parfois appelé à tort le descendant direct du combinator"?
- Ça sonne bien pour moi.
- Ai-je raté quelque chose? Enfant serait de niveau inférieur. descendant pourrait être n'importe quel nombre de niveaux. Donc, dans ce cas, l'enfant == descendant direct. Alors, pourquoi est-il parfois appelé à tort descendant direct du combinator"? enfant direct serait faux, mais descendant direct semble correcte? S'il vous plaît ne corrigez-moi si je suis mal ici.
- La note de bas de page semble correct comme il parle direct de l'enfant, qui j'en conviens est inutile, car un enfant est le prochain niveau bas de toute façon, mais le texte principal semble erronée pour les raisons ci-dessus.
- Je dirais: "> is the child combinator/direct descendant, sometimes mistakenly called the direct child combinator"
- Voir Quentin les commentaires juste au-dessus de la vôtre.
InformationsquelleAutor BoltClock
31

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

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

Un sélecteur CSS peut contenir plus d'un simple sélecteur. Entre les sélecteurs simples, nous pouvons inclure un combinator.

Il existe quatre différents combinators en CSS3:
1. sélecteur de descendant (de l'espace)
2. sélecteur d'enfant (>)
3. adjacentes sélecteur de frères (+)
4. général sélecteur de frères (~)
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> 
</div>

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

</body>
</html>
```
De sortie:

Plus d'informations à propos de CSS Combinators
- developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/...
- Merci pour l'excellente explication de parent-enfant sélecteurs css!
- Que signifie alors, quand vous obtenez quelque chose comme .entry-content > * {"code" } qui est suivie par .entry-content {"other code" }? Ne pas .entry-content > * couvrir tous les enfants de entry-content?
InformationsquelleAutor Premraj
11

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

http://www.w3.org/TR/CSS2/selector.html#child-selectors
- Merci beaucoup pour le lien ! J'ai découvert aussi le "à côté de la fratrie sélecteurs de" il.
- Vous trouverez prise en charge du navigateur sur Sitepoint. Ne fonctionne pas sous IE6 si c'est important pour vos projets, OK partout ailleurs. Cette ressource est de l'esp. utile pour les frères et sœurs, :nth-child (), etc où le soutien est encore incomplet
InformationsquelleAutor Dagg Nabbit
7

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

InformationsquelleAutor dan04
2

Tous p les balises de classe some_class qui sont les enfants directs d'un div tag.
- pas les enfants, les enfants directs
InformationsquelleAutor tschaible

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 serait d'obtenir le style qui leur est appliqué.

InformationsquelleAutor suraj rawat

0

( sélecteur d'enfant) a été introduit dans css2.
div p{ } sélectionnez tous les éléments p défunte des éléments div, alors que la div > p sélectionne seul enfant à p éléments, pas grand enfant, arrière petit enfant sur ainsi de suite.
```
<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 le CSS Ce[lecteurs et de leur utilisation, vérifiez mon blog,
les sélecteurs css et des sélecteurs css3

InformationsquelleAutor Avinash Malhotra

Vous devez vous connecter pour publier un commentaire.