Pourquoi écrire deux fois la même cible ?

Bonjour à vous tous,

Je suis perplexe ! J'ai surfé sur le web, à la recherche de solutions graphiques pour des menus déroulants, et je suis tombé sur ce code CSS dont c'est la première fois que je le vois :

.menu-deroulant li li {
	...
}

Pourquoi il y a deux fois "li" ? J'ai comme l'impression que c'est une erreur de saisie mais je préfère vous poser la question : comment interpréter cette instruction si tant est qu'elle est exacte ?
Modifié par ObiJuanKenobi (03 May 2022 - 06:55)

Hello,

C'est un sélecteur qui va cibler les "li" descendants de "li" eux-mêmes descendants de ".menu-déroulant".

En clair, le but est de cibler les sous-enfants "li" (ceux d'un sous-menu) et non ceux du premier niveau.

Tu verras aussi beaucoup de sélecteurs de ce genre :

.accordion > * > summary

Dans les CSS, mais aussi en JS.

Ou encore :

[class*=grid]

Je te laisse aller voir les spec'.
Modifié par Olivier C (03 May 2022 - 12:01)

Merci Raphael pour tes explications et justement c'est ce que j'ai pensé au début. C'est-à-dire que la déclaration ciblait les <li> enfants d'autres <li> eux-même enfants d'un parent <ul>. Mais le problème c'est que dans la structure HTML, il n'y avait pas des enfants de <li>. C'est pour ça que j'ai créé ce sujet pour comprendre cette déclaration.

Quand aux sélecteurs, je n'utilise pour le moment que "," et ">". Je ne connais pas encore Javascript. Se sera mon prochain cours.