Comment le caractère «supérieur à» ou «>» est-il utilisé dans CSS?

159

J'ai vu ce personnage plusieurs fois dans des fichiers CSS mais je n'ai aucune idée de son utilisation. Quelqu'un peut-il me l'expliquer et me montrer comment ils sont utiles pour faciliter le style d'une page?

css css-selectors

— Sam152
source

1

Sachez qu'il nécessite Windows Internet Explorer 7 ou une version ultérieure. Ou FF ou un navigateur moderne. http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx

— Vili le

BTW,> est normalement connu comme "supérieur à" (ou, à tort, à tort, comme crochet à angle droit).

— Richard

1

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

— TZHX

201

C'est un sélecteur d'enfant CSS. P > SPANsignifie appliquer le style qui suit à toutes les balises SPAN qui sont les enfants d'une Pbalise.

Notez que "enfant" signifie "descendant immédiat", pas n'importe quel descendant. P SPANest un sélecteur descendant , appliquant le style qui suit à toutes les SPANbalises qui sont des enfants d'une Pbalise ou de manière récursive des enfants de toute autre balise qui est un enfant / descendant d'une Pbalise. P > SPANs'applique uniquement aux SPANbalises enfants d'une Pbalise.

— tpdi
source

6

Une note de prudence cependant - il n'est pas pris en charge dans ie6

— wheresrhys

138

p em

correspondra à tout ce qui est dans un . Par exemple, il correspondrait aux s suivants :

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

D'autre part,

p > em

Ne correspondra qu'aux s qui sont des enfants immédiats de . Donc ça va correspondre:

<p>Text <em>foo</em> bar</p>

Mais non:

<p><strong><em>foo</em></strong></p>

— Brian Campbell
source

7

Bel exemple clair. bien que la réponse de tpdi ait été utile, celle-ci a vraiment facilité la compréhension.

— J.Scott Elblein

8

c'est ce qu'on appelle un combinateur enfant:

Un sélecteur de combinateur enfant a été ajouté pour pouvoir styliser le contenu des éléments contenus dans d'autres éléments spécifiés. Par exemple, supposons que l'on veuille définir le blanc comme couleur des hyperliens à l'intérieur des balises div pour une certaine classe car ils ont un arrière-plan sombre. Cela peut être accompli en utilisant un point pour combiner div avec les ressources de classe et un signe supérieur à comme combinateur pour combiner la paire avec a, comme indiqué ci-dessous:

div.resources > a{color: white;}

(à partir de http://www.xml.com/pub/a/2003/06/18/css3-selectors.html )

— Adam Alexander
source

4

E > F
Correspond à tout élément F qui est un enfant d'un élément E.

en savoir plus sur http://www.w3.org/TR/CSS21/selector.html#child-selectors

— Tobias
source