11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je ne comprend le résultat renvoyé par ma ligne "
$('li:even').css('color','red');
"

Le script :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr_FR" lang="fr_FR">
<head>
<meta charset="UTF-8">
<title>Selecteurs CSS</title>
</head>
<body>
<div id="listes">
	<ul id="ul1">
		<li> Element de liste 1
			<ul id="ul2">
				<li> Enfant 1</li>
				<li> Enfant 2</li>
			</ul>
		</li>
		<li> Element de liste 2</li>
		<li> Element de liste 3</li>
		<li> Element de liste 4</li>
	</ul>
</div>
<script src="jquery.js"></script>
<script>
$(function() {
$('li:even').css('color','red');
});
</script>
</body>
</html>


En retour d'écran j'ai ceci ( j'ai en rouge pour signaler les lignes "en rouge")

•Element de liste 1 en rouge
Enfant 1 en rouge
Enfant 2 en rouge
•Element de liste 2
•Element de liste 3 en rouge
•Element de liste 4


"li:even" ne devrait 'il pas souligné que les lignes pairs ?

Merci beaucoup pour votre aide
Modifié par jose2204 (28 Nov 2012 - 15:15)
Salut,

C'est une question d'héritage.
Tous tes éléments de liste imbriqués héritent du color:red; du parent...
Si tu utilises li:odd, tu verras que c'est différent ou comme ici où la couleur des li est définie (et non plus héritée...)

tm
A noter évidemment que li:even te prend tous les éléments de listes en compte.
Qu'ils soient du premier niveau ou non... Smiley biggrin

tm
Modifié par tm™ (28 Nov 2012 - 16:38)