[Résolu] Sélecteur CSS +

Bonjour,

J'ai un soucis avec le sélecteur CSS "+", Les sélecteurs d'enfants adjacents

http://www.yoyodesign.org/doc/w3c/css2/selector.html#adjacent-selectors

J'ai ce code html:

<div class="level-1">
    <a href="" title="">Lien</a>
</div>

<div class="level-1">
    <div class="level-2">
        <a href="" title="">Lien</a>
    </div>
</div>

Et j'aimerais mettre le premier lien du level 1 en rouge par exemple, mais pas les autres.

J'ai essaye ce code CSS:

div.level-1 + a {
    color: red;
}

Et ça ne fonctionne absolument pas, pourtant je ne vois pas ce que je fais de faux, mon lien a est droit apèrs ma div "level-1"...

Une idée de l'erreur?

Merci d'avance
Modifié par Blogger (16 Dec 2010 - 13:21)

Bonjour,

a n'est pas un frère de div, le sélecteur d'adjacence ne peut donc pas convenir ici.
Tu pourrais cibler le deuxième div.level-1 ainsi :

.level-1 + .level-1 {
  color: red;
}

ou tous les a dans le second div.level-1 ainsi :

.level-1 + .level-1 a {
  color: darkgreen;
}

Dans les deux cas, ça ciblerait aussi le 3ème div.level-1 s'il suivait directement le second et le 4ème, etc toujours si un autre élément ou une autre classe ne vient pas s'interposer.

Ce que tu recherches est le sélecteur d'enfant (enfant = descendant direct) qui est noté >

.level-1 > a {
  color: darkblue;
}

qui ciblera un lien DIRECTEMENT dans .level-1 donc le premier lien mais pas le second qui lui est enfant direct du div.level-2

Et bien entendu avec

.level-1 a {
  color: darkred;
}

tu cibles les deux liens de ton exemple (descendance, peu importe ce qu'il y a entre l'ascendant et le descendant)

Bonjour,

Tu n'utilise pas le bon sélecteur. Le sélecteur "+" indique un élément "adjacent", c'est-à-dire un élément qui se trouve juste après ton div, mais au même niveau. Ce qui fonctionnerait si tu avais une structure HTML comme ceci :

<div class="level-1">...</div>
<a href="#" title="">Lien</a>

Si tu veux sélectionner le premier enfant du div, il faut utiliser le sélecteur de descendance directe ">" et la pseudo-classe :first-child

div.level-1 > a:first-child { ... }

Modifié par Thomas D. (16 Dec 2010 - 12:08)