Discussion :

[laurentSc]

Bonjour,

j'essaye de comprendre un code CSS existant. Je voudrais être sûr de raisonner correctement, donc je voudrais savoir si j'interprète correctement la syntaxe .menu ul li a : un élément a (lien html) fils d'un li, lui-même fils d'un ul, lui-même fils d'un élément de classe menu. Est-ce la bonne signification ?

[CosmoKnacki]

Pas tout à fait, à la place de fils de, il faudrait dire descendant de. Par exemple, si j'ai:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="menu">
    <ul>
        <li><a href="">toto</a></li>
        <li><span><strong><a href="">tata</a></strong></span></li>
    </ul>
    <div>
        <ul>
            <li><a href="">titi</a></li>
            <li><span><strong><a href="">tutu</a></strong></span></li>
        </ul>
    </div>
</div>

La règle s'appliquera à chacun des liens (toto, tata, titi, tutu). Pourtant dans le cas de "tata", le lien n'est pas un descendant direct de li (ce n'est pas un enfant de li, mais un enfant de strong).

Pour exprimer fils de, il faudrait écrire:.menu > ul > li > a

[Invité]

Bien vu, CosmoKnacki.

Par contre, j'ai peur que pour Laurent, tu sois "Didier l'embrouille" !!

[laurentSc]

Raté Jérôme, les explications de CosmoKnacki sont très instructives...

[CosmoKnacki]

Il est mauvaise langue ce jreaux62.

[Invité]

En fait, c'est moi, "Didier l'embrouille" !

[laurentSc]

J'ai un peu plus compliqué ; merci de me dire si j'ai bien compris :

Code css :

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

.menu li:hover > ul li:hover > ul

on pointe un élément de type ul, fils d'un li que l'on survole et qui est descendant d'un ul fils d'un li survolé et descendant d'un élément de classe menu.
Même si j'ai bien compris l'explication, une telle règle est extraordinairement compliquée...

[Invité]

Elle est surtout ridicule : on ne met pas 2 :hover !


Par contre, on peut très bien avoir :

Code css :

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

.menu li > ul li:hover > a:after { ... }

Je te laisse méditer là-dessus...

[laurentSc]

Je sens que si je réfléchis trop à cette règle, je vais faire des cauchemars. En plus, pas moyen de la tester ; y a des ... !

[laurentSc]

La règle a beau être ridicule, les 2 :hover sont justifiés : si je survole le li du menu de niveau 0, le menu de niveau 1 apparaît et seulement si je survole le li qui est père d'une liste (menu de niveau 2), celle-ci apparaît.

En fait le CSS complet est :

Code css :

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

1
2
3
4
5
6
7
8
9
 
.menu li:hover > ul,
.menu li:hover > ul li:hover > ul
/*.menu li:hover > ul li > ul*/{
  display: block;
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF; 
  border:solid 1px #48B;
}]

Apparemment le bug ne concerne pas que IE7 car je suis en IE11 et si je supprime les 2 propriétés, y a plus de background...