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

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

CSS

Vue hybride

Discussions similaires

Partager

Partager