colorier liste en fonction d'une classe

**Emcy** · 03/09/2008, 15h33

bonjour,

voici mon code :

Code :

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
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
 
<style type="text/css">
 
#myDiv ul li a{
	color: green;
}   
 
.active a{
	color: red;
}
 
</style>
 
 
 
</head>
 
<body onkeyup="keyUp(event)" onload="mouseClic('onglet0')">
 
<div id="myDiv">
	<ul>
	    <li><a href="#">titi</a></li>
	    <li class="active"><a href="#">tutu</a></li>
	    <li><a href="#">toto</a></li>
	</ul>
</div>
 
 
 
</body>
 
</html>

=> la classe "active" ne fonctionne pas : pourquoi ?

**Bisûnûrs** · 03/09/2008, 15h56

Parce que tu as un lien dans ton li, et le style par défaut du navigateur sur les liens priment sur le style du parent d'un lien. En mettant ta classe active sur ton lien ça fonctionnera.

**Emcy** · 03/09/2008, 17h32

si c'est ça dont tu parles :

Code :

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
31
32
33
34
35
36
37
38
39
40
41
42
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
 
<style type="text/css">
 
#myDiv ul li a{
	color: green;
}   
 
.active {
	color: red;
	font-weight:bold;
}
 
</style>
 
 
 
</head>
 
<body>
 
<div id="myDiv">
	<ul>
	    <li><a href="#">titi</a></li>
	    <li><a href="#" class="active">tutu</a></li>
	    <li><a href="#">toto</a></li>
	</ul>
</div>
 
 
 
</body>
 
</html>

... ça ne fonctionne pas

Remarque : le "bold" de la classe "active", est lui bien pris en compte

**Bisûnûrs** · 03/09/2008, 17h46

Enlève ce code-là du coup :

Code :

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

1
2
3
#myDiv ul li a{
	color: green;
}

**Emcy** · 03/09/2008, 18h00

mais si je fais ça, ça ne fera plus ce que je veux => toutes mes lignes de mon div en verte sauf celle de la classe active en rouge

**cynferdd** · 03/09/2008, 18h06

essaye de rajouter !important à côté du red.
Sinon une autre possibilité serait de faire une classe "passive" qui aurait la couleur verte (la classe générale n'aurait plus de couleur du coup), mais ça risque d'être assez lourd pour le reste du code

colorier liste en fonction d'une classe

CSS

Vue hybride

Discussions similaires

Partager

Partager