CODEWITHSUNDEEP
htmlcss
Jonathan Wood
Jonathan Wood

Reputation: 67195

CSS Exclude Syntax

I want all the anchor links within a <div class="status-outer"> to be white, except for those anchor links that are inside an <li> tag that is inside a <ul class="dropdown-menu"> tag.

Searching around, I came up with the following. Unfortunately, it doesn't work. It seems none of my anchor links are white.

.status-outer a:not(ul.dropdown-menu > li > a) {
    color: #fff;
    text-shadow: none;
}

Can anyone help me find the problem?

Note that I have found other articles about exclusion syntax (that's how I came up with the code above), but I couldn't find any examples that were specific to my needs.

Upvotes: 2

Views: 183

Answers (4)

animuson
animuson

Reputation: 54719

The :not() pseudo-element can only take simple selectors, which basically means single things, such as body, #id, .class, or [attribute]. You can't specify an entire selector within it.

You'll have to specify two separate selectors. One that sets the anchor to white, by default, and another that sets it to inherit the color of its parent element, if its contained within a list.

.status-outer a {
    color: #fff;
    text-shadow: none;
}
.status-outer ul.dropdown-menu a {
    color: inherit;
}

The only problem you'll run into is that text-shadow does not have an inherit value, meaning you can't re-add it as its parent's value once you've removed it, you'll have to re-specify it. I don't know if that's 100% applicable here or not.

Upvotes: 1

Andrei Oniga
Andrei Oniga

Reputation: 8559

Add a second class to those list elements that you don't want to be white, with a CSS "color" rule to overwrite the previous.

Upvotes: 1

chadpeppers
chadpeppers

Reputation: 2057

.status-outer a { color: #FFF; }
.status-outer .dropdown-menu li a { color: #000; }

Upvotes: 3

kirilloid
kirilloid

Reputation: 14304

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

You'll need to do something like this:

.status-outer a { color: white; }
ul.dropdown-menu > li > a { color: inherit; }

Not sure, whether color may be inherit.

Upvotes: 1

Related Questions