que signifie '>' dans une règle CSS ?

Version imprimable

06/10/2013, 14h26
Archanciel

que signifie '>' dans une règle CSS ?
par exemple
Code:

1 2 3 .blonde ul > li { ... }
Merci !
Arc

Bonjour,
il s'agit d'un sélecteur d'enfant.

Un petit exemple pour voir
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Sélecteur Enfant</title> <style> div > span{ color:blue; } </style> </head> <body> <div> <span>Texte bleu</span> <p><span>Texte non bleu</span></p> </div> </body> </html>
Un petit lien pour tout comprendre :fleche: Sélecteur d'enfant

11/10/2013, 03h29
miltone

li ton code CSS à l'envers et ca donne :
tous les LI qui sont contenu dans un UL qui lui-même se trouve dans la classe .blonde

Plus précisément, par « enfant », on entend « descendant immédiat ». C'est-à-dire que, dans le cas présent, la clause s'appliquera si ta balise <li> est directement incluse dans ton bloc <ul>, mais sans être englobé par des balises intermédiaires.

Autre exemple : la clause suivante :

Code:

div.couleur a { color: red }

… colorera les liens <a> en rouge dans tous les blocs HTML suivants :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21  <div class="couleur"> <a href="#">Lien numéro 1</a> </div>  <div class="couleur"> <p><a href="#">Lien numéro 2</a></p> </div>  <div class="couleur"> <div> <a href="#">Lien numéro 3</a> </div> </div>  <div class="couleur"> <span style="background-color: green"><a href="#">Lien numéro 4</a></span> </div>
mais la clause

Code:

div.couleur > a { color: red }

… ne s'appliquera qu'au premier cas.

10/11/2013, 14h39
laurentSc

Et pourquoi ? Car j'interprète

Code:

div.couleur > a { color: red }

par tous les liens contenus dans une div de classe couleur...
10/11/2013, 17h23
Muchos

@laurentSc: non, comme le dit Obsidian, la règle FOO > BAR touche les éléments BAR directement enfants de FOO. Si on veut les descendants à tous les niveaux, il faut mettre FOO BAR.
10/11/2013, 17h36
laurentSc

C'est une question de français :mrgreen: car selon moi, dans l'exemple de Obsidian, tous les liens sont de niveau 1 (juste en-dessous) par rapport aux div...et si je me fie à la réponse de miltone, j'ai raison...La subtilité semble résider dans la définition de "enfant".

Citation:

et si je me fie à la réponse de miltone, j'ai raison...

malheureusement cette réponse n'est pas correcte ou du moins incomplète :aie:

Citation:

C'est une question de français :mrgreen: car selon moi, dans l'exemple de Obsidian, tous les liens sont de niveau 1 (juste en-dessous) par rapport aux div

Non, il s'agit de cibler les enfants directs et non les petits enfants éventuels, être père n'est pas la même chose qu'être grand père ;)
Dans l'exemple tous les A non pas un parent de type DIV et ayant la class couleur.

Le parent direct, papa maman, est celui que l'on récupère avec parentNode en javascript.

Exemple pour voir
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Sélecteur Enfant</title> <style> div.couleur > span{ color:blue; } </style> </head> <body> <div class="couleur"> <span>Texte bleu</span> <p><span>Texte non bleu</span></p> <span>Texte bleu</span> </div> </body> <script> var i, nb, oSpans = document.getElementsByTagName('SPAN'); for( i=0, nb=oSpans.length; i <nb; i++){ oSpans[i].innerHTML += ' [parent : ' +oSpans[i].parentNode.tagName +']'; } </script> </html>

10/11/2013, 20h29
laurentSc

Mea culpa, j'avais pas vu que dans les cas 2 à 4, les liens sont des petits-enfants de div...et non des enfants. Et merci pour les cours CSS