0

What is wrong with this? .btn:not(.btn-float .btn) { ... } I'd like to apply a css for all elements that have .btn class, except the ones within the div .btn-float

the result i'm getting, is that the class is not applied to any .btn element!

Thanks

Websphere
  • 563
  • 8
  • 24
  • are you writing just to write?? my issue is completely different as i'm not intending to use multiple :not() selectors! – Websphere Aug 26 '17 at 10:27

1 Answers1

2

It should be :

div:not(.btn-float) .btn { ... }

This means select all divs that aren't .btn-float, then select the .btns in them.

DjaouadNM
  • 22,013
  • 4
  • 33
  • 55
  • or `*:not(.btn-float) .btn { ... }` if we're not sure the parent element is a `div` – Amin Jafari Aug 26 '17 at 10:29
  • thanks Mr Geek for your reply. Actually what i want is to apply the css class for all `.btn` element except those within the `div.btn-float` – Websphere Aug 26 '17 at 10:29
  • ah OK I see :) I'll try it right now and will let you know :) – Websphere Aug 26 '17 at 10:30
  • @Websphere This does exactly what you're saying! – DjaouadNM Aug 26 '17 at 10:31
  • So if there's a div that's not .btn-float which either descends from or contains a div.btn-float, that gets matched despite the .btn-float, no? – BoltClock Aug 26 '17 at 10:32
  • @MrGeek, `*:not(.btn-float) .btn` doesn't work! it applies the css to also the `.btn` inside the `.btn-float` div :/ – Websphere Aug 26 '17 at 10:36
  • @Websphere: That's because https://stackoverflow.com/questions/7084112/css-negation-pseudo-class-not-for-parent-ancestor-elements – BoltClock Aug 26 '17 at 10:36
  • @BoltClock, don't understand much your question, what I want to achieve, is simply apply a css class to all `.btn` elements, except those within a '.btn-float' div :) – Websphere Aug 26 '17 at 10:37
  • @Websphere: Yes and the link is saying it's not possible with just one selector. You need to override. – BoltClock Aug 26 '17 at 10:38
  • OK, so that means i'll have to create 2 css classes? that's unfortunate :/ – Websphere Aug 26 '17 at 10:41
  • well, the easiest solution I found is to give a specific class name to the excluded buttons so i can simply use `.btn:not(.btn-excluded) { ... }` – Websphere Aug 26 '17 at 10:46