CSS Exclude Syntax

Question

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.

@hjpotter92: The problem seems to be that I don't have the correct syntax to exclude those anchor links withing an element with a particular class. So it seems I'd have exactly the same issue taking your suggestion as well. — Jonathan Wood
– Jonathan Wood, Commented Mar 29, 2012 at 19:47
@JonathanWood, can you post your applicable markup in a fiddle so we can play? — James Hill
– James Hill, Commented Mar 29, 2012 at 19:47
@James Hill: Thanks, but my actual markup is very complex and Chad's response seems to fit the bill. — Jonathan Wood
– Jonathan Wood, Commented Mar 29, 2012 at 19:51

chadpeppers · Accepted Answer · 2012-03-29 19:47:42Z

3

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

answered Mar 29, 2012 at 19:47

chadpeppers

2,0581 gold badge20 silver badges27 bronze badges

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

Comments

kirilloid · Accepted Answer · 2012-03-29 19:47:37Z

1

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.

answered Mar 29, 2012 at 19:47

kirilloid

14.4k6 gold badges42 silver badges54 bronze badges

Comments

Andrei Oniga · Accepted Answer · 2012-03-29 19:48:24Z

1

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.

answered Mar 29, 2012 at 19:48

Andrei Oniga

8,62917 gold badges55 silver badges91 bronze badges

Comments

animuson · Accepted Answer · 2012-03-29 19:53:40Z

1

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.

answered Mar 29, 2012 at 19:53

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

2 Comments

Jonathan Wood Over a year ago

Thanks. text-shadow is not a problem. However, color: inherit seems to be. This is a dropdown menu (Twitter Bootstrap) that has a different color depending on if that menu item is highlighted. Using color: inherit seems to kill that.

animuson Over a year ago

@Jonathan: Ah, another option could be to put the styles that set the color of those links below this reset style, and make sure they're more specific so they just override this style anyways. ul.dropdown-menu li a is more specific than .status-outer a so you shouldn't have problems.

Collectives™ on Stack Overflow

CSS Exclude Syntax

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related