Sélecteur CSS pour obtenir précédent frère [en double]
cette question a déjà une réponse ici:
- y a-t-il un sélecteur CSS" frère précédent"? 14 réponses
est-il possible d'utiliser pur CSS(3) pour sélectionner un élément qui est un frère ou une sœur précédent d'un élément d'une classe particulière?
c'est à dire:
html:
<div id='element-to-find'></div>
<div id='box1'></div>
<!-- a bunch more DOM elements between here --->
<div id='box2'>
<div id='inner-box'></div>
</div>
css:
#box1{ /*some styling*/ }
#box2{ /*some styling*/ }
#box2.active .....
maintenant, quand # box2 a la classe active je veux sélectionner et faire quelque chose du style de #element-to-find . Est-il de toute façon d'accomplir cette?
2 réponses
sans en savoir plus sur vos sélecteurs, vous pourriez potentiellement utiliser le sélecteur CSS :not ().
div:not(#box1), div:not(#box2) {
/*some style here*/
}
je suggérerais simplement de donner votre #element-to-find une classe aussi bien quand vous sélectionnez box2 et avoir un style prêt pour elle.
Il y a eu plusieurs propositions pour CSSWG dans www-style@w3.org liste de diffusion pour les précédentes-frère-combinator: mon seul (2012), un autre 1 , 2 (2013).
réponse commune de Tab Atkins est comme "nous avons déjà indicateur de sujet pour cela". Pour la sélection de descendants d'un frère ou d'une sœur précédent (qui serait trivial avec un combinateur de frères ou sœurs précédent, p.ex. .example - UL > LI ), il suggère d'utiliser :matches() comme pseudoclasse fonctionnelle, par exemple :matches(!UL + .example) > LI . L'indicateur de sujet et :matches() sont tous les deux à l'état d'ébauche et ne peuvent pas encore être utilisés dans le monde réel.
donc vous devriez ajouter une classe régulière à l'élément element-to-find ou (beaucoup moins souhaitable si votre classe active n'est pas ajoutée via JS) utilisez JavaScript pour émuler la fonctionnalité "précédent-sibling-combinator".