web-dev-qa-db-fra.com

Sélecteurs CSS frères (sélectionnez tous les frères et sœurs)

Habituellement, je suis bon avec CSS, mais je n'arrive pas à comprendre celui-ci. Si j'ai une structure de

<div>
    <h2 class="open">1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>
</div>

comment puis-je cibler tous les frères et sœurs h2 en utilisant le .open classe avec CSS? Mon principal problème est que les sélecteurs frères (.open + h2) ne ciblera que le h2 suivant immédiatement .open.

csscss3css-selectors
36
Chad

Vous pouvez sélectionner tous les frères et sœurs suivants à l'aide de ~ Au lieu de +:

.open ~ h2

Si vous devez sélectionner tous les éléments h2 Qui ne sont pas .open Qu'ils précèdent ou suivent .open, Il n'y a pas de combinateur frère pour cela. Vous devrez utiliser :not() à la place:

h2:not(.open)

En option avec un combinateur enfant si vous devez limiter la sélection aux parents div:

div > h2:not(.open)
69
BoltClock

Je sais que ce n'est pas une réponse directe à votre question, mais j'ai trouvé que c'était un moyen beaucoup plus efficace de sélectionner les frères et sœurs en sélectionnant simplement tous les enfants du parent, et en spécifiant une classe unique pour l'ouverture comme vous l'avez fait là-bas. Le code serait donc:

div h2 { } // apply the style for all "siblings" but really children
div h2.open { } // apply the style or cancel styles from the siblings

Cela fonctionne très bien pour moi et ne nécessite pas de nouvelles règles CSS ou quoi que ce soit de spécial.

1
agrublev