Is there a way to have a :not(.foo + .bar) selector? Or do I have to use a separate selector to cancel out the effects of .foo + .bar?
Asked
Active
Viewed 564 times
0
-
`:not` only takes simple selectors...and that isn't one. – Paulie_D Aug 08 '16 at 16:22
-
1What do you really want to do? Do you have 3 sibling elements and want to change the styles of one of them? Can we see your html? – Ricardo Maturi Aug 08 '16 at 16:25
-
The question is self-explanatory. The asker wants to match any .bar that is not .foo + .bar. If you need HTML to understand what .foo + .bar means, then you need to do some basic research on CSS selectors. – BoltClock Mar 04 '17 at 07:23
1 Answers
1
It's worth noting that :not(.foo + .bar) is valid in Selectors 4, and implementations are on their way. Having said that, due to the nature of the adjacent sibling combinator + (and similarly the child combinator >), there is a Selectors 3 equivalent, although you will need a list of up to three complex selectors:
:first-child, :not(.foo) + *, .foo + :not(.bar)
But this is a direct conversion that accounts for elements that are not .bar. More likely, you just want to match any .bar that's not directly preceded by a .foo. In that case, it gets even simpler:
.bar:first-child, :not(.foo) + .bar
And you can pick and choose further depending on your needs:
- If not being preceded by a
.foomeans.barbecomes the first child, you can just use.bar:first-child. - If
.baris guaranteed to have a preceding sibling, you can just use:not(.foo) + .bar.
If you need to account for both possibilities, then listing both as shown above will do just fine.
Note that the .foo and .bar selectors don't necessarily have to be different. You can match any .bar that's not immediately preceded by another .bar with the exact same technique.
