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

Réponses:

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
la source
6
Une note de prudence cependant - il n'est pas pris en charge dans ie6
wheresrhys
138 
p em

correspondra à tout ce <em>qui est dans un <p>. Par exemple, il correspondrait aux <em>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 <em>s qui sont des enfants immédiats de <p>. Donc ça va correspondre: 

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

Mais non:

<p><strong><em>foo</em></strong></p>
Brian Campbell
la 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
la source