colorier liste en fonction d'une classe

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

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, 14h56

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, 16h32

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, 16h46

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, 17h00

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, 17h06

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

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

Le sélecteur #myDiv ul li a est plus précis que le .active donc prime sur l'affichage du style, tu peux faire comme ça :

Code :

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

1
2
3
4
#myDiv ul li a.active{
   color:red;
   font-weight:bold;
}

**Emcy** · 04/09/2008, 11h30

ok , merci ça marche

colorier liste en fonction d'une classe

CSS

Discussions similaires

Partager

Partager