CODEWITHSUNDEEP
htmlcss
SivaRajini
SivaRajini

Reputation: 7375

:not selector in css not working

Please refer below code

html:

<a href="#" class="red">AA</a>
<a href="#" class="navitem dropdown-toggle">BB</a>
<a href="#" class="user-nav">CC</a>
<a href="#">DD</a>

i want to apply the color except two anchors which contains the following classes "navitem dropdown-toggle" and "user-nav"

css:

:not(a[class="navitem dropdown-toggle"]), :not(a[class="user-nav"]) {
    color:#C71444 !important;
    text-decoration:none !important;
}

but color is not applied for first and last anchor tags.nothing gets worked. why ?

fiddle : http://jsfiddle.net/QymZq/1/

Thanks,

Siva

Upvotes: 1

Views: 90

Answers (2)

Quentin
Quentin

Reputation: 943108

For a start, your syntax is invalid: from the specification

The negation pseudo-class, :not(X), is a functional notation taking a simple selector

and

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

so, if we were to simply fix your syntax we would get:

:not(a):not([class="navitem dropdown-toggle"]), :not(a):not([class="user-nav"]) {
    color:#C71444 !important;
    text-decoration:none !important;
}

However, you do want it to match a elements.

a:not([class="navitem dropdown-toggle"]), a:not([class="user-nav"]) {
    color:#C71444 !important;
    text-decoration:none !important;
}

However, even with this the ruleset will apply if something a:not([class="navitem dropdown-toggle"]) or if something is a:not([class="navitem dropdown-toggle"]) and that means everything (since those two selectors cannot apply to the same element).

It looks like you actually want:

a:not([class="navitem dropdown-toggle"]):not([class="user-nav"]) {
    color:green !important;
    text-decoration:none !important;
}

Upvotes: 4

Michal Brašna
Michal Brašna

Reputation: 2323

Not exactly the same, but it may do the job

a:not(.navitem):not(.user-nav):not(.dropdown-toggle) {
    color:#C71444 !important;
    text-decoration:none !important;
}

But try to avoid :not as it is performance killer.

DEMO HERE

Upvotes: 5

Related Questions