css - Can I select an element that's not immediately after another, e.g. :not(.foo + .bar)? -


is there way have :not(.foo + .bar) selector? or have use separate selector cancel out effects of .foo + .bar?

it's worth noting :not(.foo + .bar) valid in selectors 4, , implementations on way. having said that, due nature of adjacent sibling combinator + (and child combinator >), there selectors 3 equivalent, although need list of 3 complex selectors:

:first-child, :not(.foo) + *, .foo + :not(.bar) 

but direct conversion accounts elements not .bar. more likely, want match .bar that's not directly preceded .foo. in case, gets simpler:

.bar:first-child, :not(.foo) + .bar 

and can pick , choose further depending on needs:

  • if not being preceded .foo means .bar becomes first child, can use .bar:first-child.
  • if .bar guaranteed have preceding sibling, can use :not(.foo) + .bar.

if need account both possibilities, listing both shown above fine.

note .foo , .bar selectors don't have different. can match .bar that's not preceded another .bar exact same technique.


Comments