Discussion :

[Cynthia.]

Bonjour,

Je cherche à comprendre la différence entre ces deux lignes CSS (ne prenez pas en compte le nom de la classe et le contenu entre crochets, je m'intéresse uniquement à la "cible" des caractéristiques que je vais appliquer):

.classA li a:hover { ... }
.classA a:hover { ... }

Si quelqu'un pouvait également me détailler la première ligne ça ne serait pas de refus!


Merci d'avance

[sebhm]

Bonjour,

Code :

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

.classA li a:hover { ... }

le CSS va s'appliquer sur certains liens (a) lorsque la souris passe dessus (hover).
Les liens pris en compte seront ceux dont un parent est une liste (li), cette liste elle-meme ayant pour parent un element dont la classe est ".classA"

Code :

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

.classA a:hover { ... }

Presque pareil sauf que le lien n'a pas besoin d'être dans une liste (pas de li).

exemples :

Code :

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

1
2
3
4
5
6
7
<div class=".classA">
  <ul>
    <li><a href="#">bla bla bla bla bla bla</a></li>
    <li><a href="#">bli bli bli bli </a></li>
    <li><a href="#">blo blo blo </a></li>
  </ul>
</div>

les 2 css s'appliquent sur cet exemple (quand la souris passe sur un des 3 liens)

Code :

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

1
2
3
4
5
6
7
8
9
<div class=".classA">
 <div class="une_autre_classe">
  <ul>
    <li><span>toto</span><a href="#">bla bla bla bla bla bla</a></li>
    <li><a href="#">bli bli bli bli </a></li>
    <li class="on_sen_fiche"><a href="#">blo blo blo </a></li>
  </ul>
 </div>
</div>

les 2 css s'appliquent sur cet exemple (quand la souris passe sur un des 3 liens)

Code :

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

1
2
3
4
5
<div class=".classA">
<a href="#">bla bla bla bla bla bla</a>
<a href="#">bli bli bli bli </a>
<a href="#" class="on_sen_fiche_aussi">un autre lien</a>
</div>

seul le second CSS s'applique dans ce cas là, car pas de liste (li)

[Cynthia.]

Un grand merci seb pour ta réponse rapide et complète, j'ai tout compris!