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

**Archanciel** · 06/10/2013, 14h26

par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.blonde ul > li {
  ...
}

Merci !
Arc

**NoSmoking** · 06/10/2013, 16h57

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

Un petit exemple pour voir

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélecteur d'enfant

**miltone** · 11/10/2013, 03h29

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

**Obsidian** · 09/11/2013, 16h40

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

div.couleur a { color: red }

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mais la clause

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

div.couleur > a { color: red }

… ne s'appliquera qu'au premier cas.

**laurentSc** · 10/11/2013, 14h39

Et pourquoi ? Car j'interprète

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

div.couleur > a { color: red }

par tous les liens contenus dans une div de classe couleur...

**Muchos** · 10/11/2013, 17h23

@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.

**laurentSc** · 10/11/2013, 17h36

C'est une question de français

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".

**NoSmoking** · 10/11/2013, 19h23

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

C'est une question de français

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**laurentSc** · 10/11/2013, 20h29

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

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

CSS

Discussions similaires

Partager

Partager