Syntaxe non comprise

**grassel** · 29/03/2009, 19h11

bon soir à tous

J'adapte un code CSS de menu déroulant récupéré sur le net. Il fonctionne parfaitement.

Cela dit, j'aurais besoin d'aide au sujet du ci-dessous :

Code :

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

1
2
3
#menuDeroulant li:hover > .sousMenu {
	display: block;
}

Quelqu'un pourrait-il m'expliquer la syntaxe ">"
Y aurait-il une autre façon de l'écrire pour une meilleur compréhension?

Voilà, sur ce bon app
pascal

**Macmillenium** · 29/03/2009, 19h53

Bonsoir,

Envoyé par grassel

Quelqu'un pourrait-il m'expliquer la syntaxe ">"

C'est le sélecteur d'enfants directes (specs CSS2).

Dans ton exemple, la propriété display: block; ne s'applique qu'aux enfants directes de <li> dont la classe affectée est .sousMenu

Voici un petit exemple plus clair :

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
26
27
28
29
30
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<title>Document sans nom</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css">
                ul li { 
                background:gray;
                }
                ul li:hover > .sousMenu {
                background:red;
                }
        </style>
</head>
 
<body>
 
	<ul>
		<li>
			<p class="sousMenu">Sous menu enfant directe</p>
				<div>
					<p class="sousMenu">Sous menu descendant</p>
				</div>
		</li>
	</ul>
 
</body>
 
</html>