[Expert WANTED] CSS Adjacent Sibling Selectors, multiples subséquents

Bonjour,

J'ai besoin de changer la couleur d'arrière plan de tous les éléments subséquents aux titres h2 et h3, au survol de ces derniers. Il peut y avoir un nombre indéterminé d'éléments, mais je me suis limité à 5 dans l'exemple qui suit, cela devrait suffire.

Cela fonctionne, mais je me demande si :

1) Cela n'est pas trop lourd à interpréter pour le navigateur
2) S'il y a moyen d'écrire cela plus simplement

.ns-0 h2:hover, .ns-0 h2:hover + *, .ns-0 h2:hover + * + *, .ns-0 h2:hover + *  + * + *, .ns-0 h2:hover + *  + * + * + *, .ns-0 h2:hover + *  + * + * + * + * { background-color: #ffffcc; }
.ns-0 h3 :hover, .ns-0 h3:hover + *, .ns-0 h3:hover + * + *, .ns-0 h3:hover + *  + * + *, .ns-0 h3:hover + *  + * + * + *, .ns-0 h3:hover + *  + * + * + * + * { background-color: #ffffcc; }

Je précise que je suis débutant, mais je pense que ma question s'adresse à un expert.

Salut,

Sache que CSS 3 introduit un sélecteur qui sélectionne des éléments frères qui ne sont pas nécessairement immédiatement frères. Il s'écrit avec un tilde (~) et sa syntaxe ressemble à ça :

h2:hover ~ * {
  background-color: #ffc;
}

Ce sélecteur, d'après le site Quirksmode, est déjà implémenté par les versions les plus récentes de Firefox, d'Opera, de Safari, de Google Chrome, ainsi que par IE depuis la version 7.

Bonjour,

Peut-être il y a t-il un autre moyen de faire ?

Ce besoin de hover s'applique t-il à des liens ? Etc.

Avec une description plus précise de tes besoins et surtout une page en ligne il serait plus simple de cerner le souci.

Peut-être la structure html est-elle à revoir ?

Ah oui, c'est pratique. Mais dans mon cas, cela ne m'arrange pas.

Avec la première solution, l'effet s'appliquait aux elements suivants le h2 survole, mais s'arrêtait dès lors qu'un deuxième h2 apparaissait (même si le nombre de 5 elements n'etait pas atteint). Et c'est ce que je voulais.

Pour être plus clair :

Avec ma 1ère solution :

<h2>Titre</h2>

<p>element affecte</p>
<blockquote>element affecte</blockquote>
<p>element affecte</p>

<h2>Titre</h2>

<p>element NON AFFECTE</p>

Avec la solution proposee :

<h2>Titre</h2>

<p>element affecte</p>
<blockquote>element affecte</blockquote>
<p>element affecte</p>

<h2>Titre</h2>

<p>element AFFECTE</p> /*JE N'AIMERAIS PAS QU'IL LE SOIT */

Modifié par Felipe (08 Dec 2010 - 12:53)

Igor a écrit :
Bonjour,

Peut-être il y a t-il un autre moyen de faire ?

Ce besoin de hover s'applique t-il à des liens ? Etc.

Avec une description plus précise de tes besoins et surtout une page en ligne il serait plus simple de cerner le souci.

Peut-être la structure html est-elle à revoir ?

Oui, en effet... A vrai dire, j'aimerais effectivement que l'effet ne s'applique qu'au survol d'un lien ( « Modifier ») contenu dans le h2 ou le h3. Au survol de ce lien, les éléments qui suivent devraient être affectés par le nouveau background, mais seulement jusqu'au h2 ou h3 suivant.

Voilà la page pour comprendre :

http://fr.wikimini.org/wiki/Chevalier

Comme vous le comprendrez sur cette page, l'idée est de mettre en évidence la partie qui pourra être modifiée par le lecteur en cliquant sur le lien modifier qui se trouve à chaque section de texte (la page en question est un wiki).

J'essaie différentes choses, mais je sèche.
Modifié par Lorangeo (08 Dec 2010 - 00:36)

Une idée ?