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

560

> est le child combinator, parfois appelé par erreur le combinateur descendant direct.

Cela signifie que le sélecteur ne sélectionne que div > p.some_class paragraphes de .some_class qui sont imbriqués directement à l'intérieur d'undiv, et pas de points qui sont imbriqués en outre à 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 n'est pas:

Sélectionné
Ce p.some_class est situé directement à l'intérieur du div, d'où une relation parent-enfant est établie entre les deux éléments.
Non sélectionné
Ce p.some_class est contenu par un dans le div, plutôt que le div lui-même. Bien que ce p.some_class soit un descendant du div, ce n'est pas un enfant; c'est un petit-enfant.

Par conséquent, alors que div > p.some_class ne correspondra pas à cet élément, div p.some_class le fera, en utilisant le descendant combinator à la place.

_{Beaucoup de gens vont plus loin à l'appeler « enfant direct » ou « enfant immédiat », mais qui est tout à fait inutile (et incroyablement ennuyeux pour moi), parce qu'un élément enfant est immédiat par définition de toute façon, donc ils signifient exactement la même chose. Il n'y a pas d'enfant indirect.}

Source

2010-07-12 04:35:44 BoltClock

+2

+1 Est-il vraiment appelé un * sélecteur d'enfant *? Si c'est le cas, c'est très trompeur. Je pensais que «quelque chose a» serait un sélecteur d'enfant. – alex

+2

@alex: [oui] (http://www.w3.org/TR/CSS2/selector.html#child-selectors) :) '#quelque chose a' pourrait signifier' a' est un petit-fils ou un grand petit-fils de '#quelque chose '(cela ne prend pas en compte la profondeur d'imbrication). – BoltClock

+0

Eh bien, je veux dire que c'est encore un enfant ... un petit-enfant peut-être: P – alex

2

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

Source

2010-07-12 04:34:52 tschaible

+0

pas les enfants, les enfants directs – Imad

6

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

Source

2010-07-12 04:35:18 dan04

9

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

Source

2010-07-12 04:37:43

+0

Merci beaucoup pour le lien! J'ai également découvert les "sélecteurs de frères et sœurs adjacents". –

+0

Vous trouverez [support de navigateur] (http://reference.sitepoint.com/css/childselector#compatibilitysection) sur Sitepoint. Ne fonctionne pas dans IE6 si cela compte pour vos projets, OK partout ailleurs. Cette ressource est esp. utile pour les frères et sœurs,: nth-child() etc, où le support est encore incomplet – FelipeAls

1

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>

div > p.some_class{ 
    color:red; 
}

css

Tous les enfants directs qui sont <p> avec .some_class obtiendrait le style qui leur est appliqué.

Source

2013-12-19 15:15:37

0

(sélecteur d'enfant) a été introduit dans css2. div p {} sélectionne tous les éléments p decedent des éléments div, alors que div> p ne sélectionne que les éléments p enfants, 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 CSS Ce [Lectors et leur utilisation, consultez mon blog, css selectors et css3 selectors

Source

2017-01-14 17:01:58

7

> (signe supérieur) est un Combinator 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 sélecteurs simples, nous pouvons inclure un combinateur.

Il y a quatre combinateurs différents CSS3:

sélecteur descendant (espace)
de sélection des enfants (>)
sélecteur de frères et soeurs adjacent (+)
sélecteur de frères et soeurs général (~)

note:< n'est pas valide en CSS sélecteurs.

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:

More information about CSS Combinators

Source

2017-02-13 00:49:46 Premraj

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

Répondre

Questions connexes