Sélecteurs css

Question assez simple mais qui me pose des petits problèmes. Est-ce qu'il est possible, en css, de sélectionner un élément en fonction d'un de ses fils.
En gros, je voudrais modifier l'apparence d'un élement <li> en fonction de l'état du <a> qu'il contient.

Il me faudrait quelquechose du genre li > a:hover mais qu'au lieu de sélectionner le <a>, cela me sélectionne le <li>.

Je n'ai rien trouvé jusqu'à maintenant (du moins pas de sélecteur direct) mais peut être peut on y arriver en en combinant d'autres?

Bonjour à toi aussi Toniob,

Je ne crois pas qu'on puisse faire ce que tu demandes, mais tu peux tester les sélecteurs adjacents :

p + ul {}

qui correspond ici à toute balise UL précédée d'un paragraphe.
Je ne crois pas qu'il y ait de limites au nombres d'éléments précédénts qu'on indique.

Voici un extrait de la feuille de style du desing zengarden mnemonic, par Dave Shea :

#lselect ul>li {
(...)
#lselect ul>li a {display: block;}
#lselect ul>li a.c {display: inline;}

#lselect ul>li {position: relative; left: -14px;}
#lselect ul>li+li {position: relative; left: -12px;}
#lselect ul>li+li+li {position: relative; left: -10px;}
#lselect ul>li+li+li+li {position: relative; left: -8px;}

#lselect ul>li+li+li+li+li {position: relative; left: 98px; top: -11em;}
#lselect ul>li+li+li+li+li+li {position: relative; left: 100px; top: -11em;}
#lselect ul>li+li+li+li+li+li+li {position: relative; left: 102px; top: -11em;}
#lselect ul>li+li+li+li+li+li+li+li {position: relative; left: 104px; top: -11em;}

Modifié par (20 May 2006 - 18:17)

Oui, j'ai bien regardé celui-là mais ça ne permet pas de faire ce que je veux malheureusement.

Bon au pire, je peux essayer de styler les liens au lieu des <li> mais bon, j'aurais préférer utiliser la méthode de sélection du parent. Bizarre que ça ne soit même pas discuté pour css3. Ça serait utile genre : li < a:hover .

Je vois mal pouquoi il a pris la peine de répéter position:relative à chaque fois puisque les déclarations de #lselect ul>li vont également toucher #lselect ul>li+li+li+li+li+li+li+li

Toniob a écrit :
Bon au pire, je peux essayer de styler les liens au lieu des <li>

En général, on arrive à faire ce que l'on veut avec un petit :

ul#machin li a {display: block; height: 100%; width: 100%;}

Pas sûr que ça soit ce qui t'intéresse, mais on ne sait jamais…

Petite question pour les CSSeurs fous : il me semble que si l'on veut que le a prenne toute la surface du li, le width: 100% est inutile. Qu'en est-il pour la hauteur ? Si la hauteur du li n'est pas définie, ça risque d'être inutile également, non ?

mpop a écrit :

il me semble que si l'on veut que le a prenne toute la surface du li, le width: 100% est inutile. Qu'en est-il pour la hauteur ? Si la hauteur du li n'est pas définie, ça risque d'être inutile également, non ?

Pour la question du width il faut quand même que a soit mis en comportement block.

Sinon par défaut le conteneur block li aura la hauteur de son contenu. Si ce contenu est placé dans un élément y compris de type span et quelque soit son comportement css alors le conteneur block concerné en sera d'autant modulé. Donc il n'y a rien de particulier à faire a priori.

a écrit :
Je vois mal pouquoi il a pris la peine de répéter position:relative à chaque fois puisque les déclarations de #lselect ul>li vont également toucher #lselect ul>li+li+li+li+li+li+li+li

Errare humanum est, perseverare diabolicum !

J'avais réussi à m'en sortir en mettant un attribut tabindex à mes <li> mais forcément, c'est pas valide...

Groummpppfffff