probleme héritage ?

**Lorenzo77** · 27/03/2013, 13h44

salut,

j'ai un petit bout de CSS utilisé pour styler un menu :

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
43
44
45
46
.blocmenu {
    width: 250px;
    border: 1px dashed #C0C0C0;
    font: 100% arial;
}
.blocmenu UL {
    padding-left: 20px;
    list-style: none;
}
.blocmenu > UL {
    padding-left: 0px;
}
.titremenu {
    font: bold 110% arial;
    color: #D3E4BA;
    cursor: pointer;
    border: 1px outset gray;
    background-color: #415621;
    padding: 5px;
    margin-top: 5px;
    display: block;
}
.blocmenu LI A {
    font-size: 80%;
    margin-top: 6px;
    display: block;
    color: #415621;
 
    background-color: #D3E4BA;
    border: 1px inset gray;
}
/* 
"pageactive:after" fonctionne
mais le style "border" de "pageactive" ne fonctionne pas !???
 
fonctionne quand je vire le style "border" sur .blocmenu LI A
*/
 .pageactive {
    border: 2px outset gray;
    background-color: red;
}
.pageactive:after {
    content:" : LIEN ACTIF !!!!";
    margin-left: 10px;
    border: 1px solid red;
}

pour ce bloc d'HTML :

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
<div class="blocmenu">
    <ul>
        <li><span class="titremenu">Statuettes</span>
 
            <ul>
                <li><span class="titremenu">Bois</span>
 
                    <ul>
                        <li><a href="#ancienne">ancienne</a>
                        </li>
                        <li><a href="#récente">récente</a>
                        </li>
                    </ul>
                </li>
                <li><span class="titremenu">Ceramique</span>
 
                    <ul>
                        <li><a href="#ancienne" class="pageactive">ancienne</a>
                        </li>
                        <li><a href="#récente">récente</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

test et code ici : http://jsfiddle.net/LorenzoFR/DDFyy/

quand j'assigne la classe pageactive a un lien du menu, j'ai bien le pageactive:after qui style mais pas le pageactive

quand je vire le style "border" sur les liens (.blocmenu LI A) -> je vois le "border" défini par pageactive.

je pense a un probleme d'héritage (de poids) mais sans réellement comprendre, j'ai remarqué que le mot clé "!important" réglait le probleme mais j'ai pas vraiment envie d'utiliser cette abomination.

si quelqu'un pouvait m'expliquer pourquoi le pageactive ne fonctionne pas alors que le pageactive:after fonctionne, ca serait sympa.

merci

**Candygirl** · 27/03/2013, 14h46

Hello,

Tu rencontres un problème de spécificité du sélecteur.

.pageactive (un seul nom de classe) est moins spécifique que .blocmenu LI A (1 classe + 2 éléments)

Si tu veux que ton style soit pris en compte il doit être au moins aussi spécifique et placé après. Par exemple:

Code :

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