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: caniuse.com/#search=%3Anot. jQuery, however, emulates the selection level 4 standard: see stackoverflow.com/questions/10711730/… by @BoltClock — Terry
– Terry, Commented Apr 6, 2017 at 8:37
@Terry: I wonder if I should change the title of this question of mine. — BoltClock
– BoltClock, Commented Apr 6, 2017 at 8:38
I read an article about this (you can find it here 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
– geo, Commented Apr 6, 2017 at 8: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. — BoltClock
– BoltClock, Commented Apr 6, 2017 at 8:41

LIJIN SAMUEL · Accepted Answer · 2017-04-06 08:33:34Z

9

Try Like This,

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

answered Apr 6, 2017 at 8:33

LIJIN SAMUEL

8934 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ashkan Mobayen Khiabani Over a year ago

but this is applied to all the spans in the document.

BoltClock Over a year ago

@Ashkan Mobayen Khiabani: You sure about that?

Ashkan Mobayen Khiabani Over a year ago

yes it applies to all the spans (which does not have .name or .count classes)

BoltClock Over a year ago

@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?

Ashkan Mobayen Khiabani Over a year ago

Sorry. my bad. I had a comma before the second :not

LKG · Accepted Answer · 2017-04-06 08:37:33Z

4

.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>

answered Apr 6, 2017 at 8:37

LKG

4,2021 gold badge13 silver badges21 bronze badges

Collectives™ on Stack Overflow

using :not to exclude classes in css

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related