[Résolu]Sélecteur d'un élément parent à partir de l'élément enfant

Bonjour


Je souhaiterais cibler un élément parent à partir d'un élément enfant.

<li>
<a id="menu56" title="titre" href="#">Blablabla</a>
</li>

A partir de l'id menu56, je voudrais cibler li.
J'aurai pu attribuer un id à li en temps normal, mais ce code est généré dynamiquement car j'utilise Joomla !.

Existe t-il un sélecteur pour cibler un élément parent à partir de l'enfant ?


Merci pour votre aide
Modifié par ThVi (16 Aug 2008 - 20:18)

Bonjour,

non il n'est pas possible de cibler un élément parent à partir d'un élément enfant en CSS, c'est par contre faisable en DOM avec parentNode mais je doute que cela te soit utile.

Tu peux quand même nous en dire un peu plus sur ce que tu veux faire, on pourra alors peut-être te proposer d'autres solutions.
Modifié par yellowmonkey (12 Aug 2008 - 19:11)

Je voudrais appliquer au menu Participer, un aspect particulier par rapport aux autres menus (dans mon cas, une image en background).

Joomla ! injecte le code HTML dynamiquement, je ne peux pas affecter d'attribut à <li> (à moins, je suppose, d'attaquer le code PHP de l'index.php ou d'user de la méthode Template Overrides. À ce niveau et à l'heure actuelle, c'est en dehors de mes compétences).

HTML
<ul id="ja-cssmenu" class="clearfix">
   <li class="active"><a id="menu51" href="#">Accueil</a></li>
   <li class="sousMenu"><a id="menu52" href="#">Menu 1</a></li>
   <li class="sousMenu"><a id="menu53" href="#">Menu 2</a></li>
   <li class="sousMenu"><a id="menu54" href="#">Menu 3</a></li>
   <li><a id="menu55" href="#">Contact</a></li>
[#red]     <li><a id="menu56" href="#">Participer</a></li>[/#]
</ul>

CSS
#menu56 {
   background : url (/fond.jpg) ;
}

Comme vous l'avez compris, le code CSS n'affecte que la zone de lien. Mais je souhaiterais appliquer directement mon fond à un certain bloc <li> : à savoir le <li> qui encadre le lien Participer.


Merci pour votre aide

La seule solution que jvois mis à part toucher au code PHP, c'est utiliser le combinateur +.

ul li + li + li + li + li + li { }

Cela ne fonctionnera pas sur IE6 en natif, si tu veux que ca marche sur IE6 tu peux utiliser le correctif de dean edwards : http://dean.edwards.name/.

Bonsoir,

Sinon utiliser la solution Javascript (en ciblant le parentNode) qui est un palliatif tout à fait correct qui ne nuira à personne.
Modifié par yodaswii (12 Aug 2008 - 22:10)

yellowmonkey a écrit :
La seule solution que jvois mis à part toucher au code PHP, c'est utiliser le combinateur +.

ul li + li + li + li + li + li { }

Cela ne fonctionnera pas sur IE6 en natif, si tu veux que ca marche sur IE6 tu peux utiliser le correctif de dean edwards : http://dean.edwards.name/.

Super ! Merci pour la réponse.

Effectivement, j'aurais dû penser à cette solution de sélecteur de frère adjacent. Je l'avais lu dans un de mes manuels mais ça ne m'a pas sauté aux yeux.
Pour l'instant, je vais m'en tenir au code CSS mais je n'écarte pas la solution du javascript (parentNode) qui m'intéresse également.

Concernant le correctif, si tu as « deux minutes », peux-tu me glisser le lien qui me mène directement dessus ? Sinon, je me débrouillerais (grand garçon que je suis ).


Merci à vous deux.

ThVi a écrit :
Concernant le correctif, si tu as « deux minutes », peux-tu me glisser le lien qui me mène directement dessus ?

Je pense que yellowmonkey pensait au script «IE7»:
http://dean.edwards.name/weblog/2008/01/ie7-2/

Vu qu'il s'agit d'utiliser JavaScript pour palier aux lacunes d'IE6, je serais d'avis de plutôt utiliser parentNode en JavaScript. Sauf erreur de ma part, ça peut se faire ainsi:

document.getElementById('menu56').parentNode.className='ma_classe';

Florent V. a écrit :

Je pense que yellowmonkey pensait au script «IE7»:
http://dean.edwards.name/weblog/2008/01/ie7-2/

Vu qu'il s'agit d'utiliser JavaScript pour palier aux lacunes d'IE6, je serais d'avis de plutôt utiliser parentNode en JavaScript. Sauf erreur de ma part, ça peut se faire ainsi:

document.getElementById('menu56').parentNode.className='ma_classe';

Oui, vu sous cette angle, il est juste d'utiliser le JavaScript.
OK merci pour le script. Je le test.

Merci encore