using :not to exclude classes in css

Question

I'm trying to apply css for all spans in a specific class but exclude some of them, but the following code doesn't work:

.basket-items li span:not(.name,.count){border:solid 1px #ddd; border-radius:50%;}

I have always used the :not just like :not(:empty). doesn't it accept css classes?

This is the html:

<ul class="basket-items">
    <li>
          <span class="ion-android-close"></span>
          <span class="name"></span>
          <span class="ion-plus"></span>
          <span class="count"></span>
          <span class="ion-minus"></span>
    </li>
</ul>

P.S.: note that in here excluding classes are meant which produce different result than the similar question like: Can I have multiple :not() selectors?

The comma-separated notation is a selection level 4 standard that is not yet implemented. You can, however, use selection level 3 standard, which only accepts a single selector. Multiple `:not()` statements can simply be chained ;) see: http://caniuse.com/#search=%3Anot. jQuery, however, emulates the selection level 4 standard: see http://stackoverflow.com/questions/10711730/why-is-my-jquery-not-selector-not-working-in-css by @BoltClock — Terry, Apr 06 '17 at 08:37
Possible duplicate of [Can I have multiple :not() selectors?](http://stackoverflow.com/questions/5684160/can-i-have-multiple-not-selectors) — Terry, Apr 06 '17 at 08:38
@Terry: I wonder if I should change the title of [this question of mine](http://stackoverflow.com/questions/10711730/why-is-my-jquery-not-selector-not-working-in-css). — BoltClock, Apr 06 '17 at 08:38
I read an article about this (you can find it here https://kilianvalkhof.com/2008/css-html/the-css3-not-selector/ ) and it seems that on the spec of :not() there is not any comment about including comma separated classes inside :not() — geo, Apr 06 '17 at 08:38
@geo: You didn't read it thoroughly then. The article contains an example of h2:not(.foo, .bar), pointing out that it works. [The comments section under that article contains a response from yours truly that's still relevant today, five years later.](https://kilianvalkhof.com/2008/css-html/the-css3-not-selector/#comment-164654) — BoltClock, Apr 06 '17 at 08:41
@BoltClock I don't think there is a need to. p/s: Linked to your question too, since it's also relevant to the discussion. — Terry, Apr 06 '17 at 08:41

score 9 · Accepted Answer · answered Apr 06 '17 at 08:33

9

Try Like This,

.basket-items li span:not(.name):not(.count) {
   border:solid 1px #ddd; 
   border-radius:50%;
}

answered Apr 06 '17 at 08:33

LIJIN SAMUEL

883
4
12

but this is applied to all the spans in the document. – Ashkan Mobayen Khiabani Apr 06 '17 at 08:36
@Ashkan Mobayen Khiabani: You sure about that? – BoltClock Apr 06 '17 at 08:37
yes it applies to all the spans (which does not have .name or .count classes) – Ashkan Mobayen Khiabani Apr 06 '17 at 08:38
@Ashkan Mobayen Khiabani: "all the spans which do not have the classes" and "all the spans in the document" are two completely different things. Anyway, if it does apply only to the spans that don't have those two classes... what's the problem? – BoltClock Apr 06 '17 at 08:42
Sorry. my bad. I had a comma before the second :not – Ashkan Mobayen Khiabani Apr 06 '17 at 08:49

score 4 · Answer 2 · answered Apr 06 '17 at 08:37

.basket-items li span:not(.name):not(.count){border:solid 1px #ddd;}

<ul class="basket-items">
    <li>
          <span class="ion-android-close">Hello</span>
          <span class="name">Hello</span>
          <span class="ion-plus">Hello</span>
          <span class="count">Hello</span>
          <span class="ion-minus">Hello</span>
    </li>
</ul>

using :not to exclude classes in css

2 Answers2