Sélecteur d'oncle !

Salut !

Je pense que ce que je demande est une douce utopie, mais bon j’essaye quand même, on ne sait jamais.

Je connais les sélecteurs de frères en CSS et c’est bien pratique. Mais là, j’ai besoin d’un sélecteur d’oncle ! Je m’explique… J’ai parfois ce code :

<div id="1">
     <a>Toto</a>
</div>
<div id="2">
     <a>Tutu</a>
</div>

et parfois celui-ci :

<div id="1">
     <a>Toto</a>
     <a class="titi">Titi</a>
</div>
<div id="2">
     <a>Tutu</a>
</div>

Comme vous pouvez le voir, le lien « Titi » n’est pas toujours là.
« Tutu » est positionné pour le cas général (pas de « Titi ») et j’aurais besoin de le repositionner quand « Titi » est là. D’où ma question : il y a-t-il un moyen de sélectionner « Tutu » en fonction de « Titi » ? Un truc du genre :

#1 > .titi < + #2

Seulement, à ma connaissance les sélecteurs de parent (< dans mon exemple) n’existent pas et donc les sélecteur d’oncle encore moins ! Mais je suis loin de tout connaître ! Aussi, si quelqu’un a une idée…

Bonjour,

pour répondre directement à la question : non, c'est impossible. Ça serait éventuellement réalisable en javascript, mais il y a probablement des solutions plus simples : si c'est juste une question de positionnement, il est certainement possible de rendre les positions de tes div interdépendantes - comme c'est le cas avec des display: table-cell; par exemple.

Un exemple concret pourrait permettre de trouver une autre solution à ton problème, car je pense que chercher le sélecteur idéal est une voie sans issue !

OK. Merci pour cette réponse qui malheureusement confirme ce que je pensais. Malheureusement c’est dans un cadre très spécifique et très rigide. Il n’est donc pas question de développer un composant rien que pour ça dans le framewok JS, ni de de retoucher l’arborescence HTML dont chaque bloc est cloisonné. Le seule solution que j’ai trouvée est de faire positionner une classe spécifique en fonction des cas par les dev JAVA…

Encore merci en tout cas pour cette réponse qui confirme ma problématique et donc la solution.

Bonjour,

attention aux id commençant par un chiffre : c'est peut-être valide en HTML5 mais pas en HTML 4.01 (et IE8 n'entrave rien à HTML5 à part lui faire reconnaître de nouveaux noms d'éléments en JS), ça peut donner des bugs difficiles à détecter

S'il y avait eu 0 ou 1 élément dans le 1er div, alors :empty aurait été utile mais là pas moyen en CSS de sélectionner des enfants puis remonter pour aller cibler des frères du parent...
Pour info (sans rapport avec le problème exposé ci-dessus), il y a un autre cas où on peut sélectionner des éléments en fonction de ce qui précède en abusant des :nth-child et :nth-last-child. Ici ça aurait permis de cibler Toto en fonction de la présence ou non d'éléments frères le suivant : il est soit :only-child soit pas. Ça va pas bien loin (on ne sait pas qu'est-ce qui suit, ni combien d'éléments vont suivre sauf à commencer à abuser des :nth-last-child justement) mais c'est mieux que rien.
Modifié par Felipe (07 Sep 2013 - 22:43)

Pour les ID chiffrés, c’était juste pour simplifier l’exemple, mais il est vrai que du coup cela véhicule un mauvais exemple !

Pour les :empty et :only-child, cela ne résoud en rien mon problème, mais merci quand même, cela m’appris un truc en m’en a rappelé un autre !