Mystère du css ? [Résolu]

[Pymento]

Bonjour à tous, ça fait quand même un petit bout de temps que je fais du css, mais je tombe toujours à chaque projet sur des soucis mystérieux, qui tendent à me faire penser que je ne maîtriserai jamais à 100% cette techno !

Bref, mon pb:

CSS:

Code :

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

.node{
	width:170px;
	text-align:center;
	margin-top:15px;
	height:90%;
	border-radius: 20px;
}
#node_1{
	margin-left:30px;
}
.node li{
	cursor:pointer;
	font-size:20px;
	margin-bottom:10px;
	width:98%;
	list-style:none;
	border-radius: 20px;
	height:30px;
	border:solid 2px black;
        background:url(img/pattern/22.jpg)
}

.node li:hover{
	background:blue;
	color:white;
	border:solid 2px black;
}

.selected{
	background:green;
	color:white;
        border:solid 2px red;

}

HTML:

Code :

1
2
3
4
5
6
7
 
<div id="node_1" class="node">
			<li onclick="addBox(this,1);" class="selected">toto</li>
			<li onclick="addBox(this,1);">tata</li>
			<li onclick="addBox(this,1);">titi</li>
			<li onclick="addBox(this,1);">tutu</li>
		</div>

Le hover marche très bien, si je met simplement un border à mon .selected, ça ne marche pas, et si je met un background (image ou couleur) à mon li, mon .selected ne le change pas. Pour les autres lignes tout marche...

POURQUOI ??

[Bisûnûrs]

Heu, je n'ai pas bien saisi ton problème ..
Que se passe-t-il exactement ? Quel est le résultat que tu veux obtenir ? Avec quel navigateur observes-tu ton problème ?

[Pymento]

chrome & FF.

Oui dsl j'ai mal expliqué mon pb, maintenant que je l'ai mieux compris, en gros:

Les propriétés border et background (et d'ailleurs les autres) de mes 'li' ne se font pas surcharger pas dans ma classe selected.

Il ne faut pas que je stipule de propriété pour pouvoir la changer dans mon selected.

[Bisûnûrs]

C'est parce que ".node li" est plus précis que ".selected", donc est prioritaire.

Change ton .selected en li.selected et ça fonctionnera mieux.

[Bovino]

Tu as essayé en mettant tout simplement tes li dans un ul ?

[Bisûnûrs]

Ouais, c'pas faux non plus, même si ça ne résoudra pas le problème.

[Pymento]

je les ai enlevés du ul, il ne me servait pas, et il me faisait un padding inutile.
Mais effectivement j'imagine que c'est de toute façon plus 'propre' de les mettre dans un ul en touchant le margin/padding.

Pour la précision,

Code :

.selected li{}

marche encore moins, il ne me change même plus les propriétés non-renseignées de

Code :

.node li

et d'ailleurs j'avoue que je ne sais pas pourquoi..

[Bisûnûrs]

Envoyé par Pymento

Pour la précision,

Code :

.selected li{}

marche encore moins

J'ai mis ça comme ça ? J'en doute ..

[Pymento]

oups ! j'avais essayé

Code :

li .selected

et non

Code :

li.selected

petit espace en trop.

Ca marche, merci bcp !