CSS Selection / Transition property value seems to be wrong

Question

I used the #footer a selector before, but after removing #footer to make the change apply to all <a>'s on the page except the ones in a div with a class of .navbar, no links get the following selectors assigned: a:not(.navbar a),a:not(.navbar a):hover, a:not(.navbar a):active (also seen in Google Chrome element inspector)

I created 2 snippets to represent what I'm trying to say:

Working example of first version

a {
  text-decoration: none !important;
  color: #3D64FF
}

#footer a {
  text-shadow: none;
  padding: 0;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

#footer a:hover {
  text-shadow: 0px 0px 5px #3D64FF;
  padding: 0 5px;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

#footer a:active {
  text-shadow: 0px 0px 7px #3556DB;
  padding: 0 2px;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

<div id="footer">
  <a href="#">Footer link #1</a><br>
  <a href="#">Footer link #2</a><br>
  <a href="#">Footer link #3</a><br>
  <a href="#">Footer link #4</a>
</div>

Broken, new code

a {
  text-decoration: none !important;
  color: #3D64FF
}

a:not(.navbar a) {
  text-shadow: none;
  padding: 0;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

a:not(.navbar a):hover {
  text-shadow: 0px 0px 5px #3D64FF;
  padding: 0 5px;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

a:not(.navbar a):active {
  text-shadow: 0px 0px 7px #3556DB;
  padding: 0 2px;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

<div calss="navbar"><a href="#">NAVBAR link</a></div>
<a href="#">Not NAVBAR link</a>

I have to fix it again, so it applies to the entire page, except that one div.

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

You cannot do a:not(.navbar a) in CSS.

If you know your a will always be directly nested within .navbar and you want to exclude that a, you could select :not(.navbar) > a instead. But if the nesting level is arbitrary and you want to exclude a nested anywhere within .navbar, then you'll probably have trouble writing a CSS selector for that. Something like :not(.navbar) a can always match some other element higher up in the tree. See this answer for another example of why it won't work.

The simplest solution to this is to apply the effects to all a elements, then undo them in .navbar a:

.navbar a {
  text-shadow:none;
  padding:0;
  -webkit-transition-property: none;
  -moz-transition-property: none;
  -o-transition-property: none;
  transition-property: none;
}

jsFiddle preview

edited May 23 '17 at 12:04

Community

1
1

answered Jan 12 '13 at 15:34

BoltClock

700,868
160
1,392
1,356

Acoording to [this](http://jsfiddle.net/DJDavid98/VJ43W/3/) fiddle, the selector now works, but it does not exclude the navbar. And the `` can be in any element inside the `.navbar` (look in fiddle) – SeinopSys Jan 12 '13 at 15:38
@DJDavid98: You can't do `:not(.navbar a)`. I wasn't clear on that, edited. – BoltClock Jan 12 '13 at 15:44
I can't, okay, but how do I achieve this then? – SeinopSys Jan 12 '13 at 15:46
@DJDavid98: You simply want to disable transitions on `.navbar a` elements, right? – BoltClock Jan 12 '13 at 15:48
No, I want to disable transitions AND not apply the `padding` and `text-shadow` to them. – SeinopSys Jan 12 '13 at 15:50
@DJDavid98: Which means when you hover on those links, nothing should happen? – BoltClock Jan 12 '13 at 15:52
On my live site, the menus look weird now. – SeinopSys Jan 12 '13 at 16:17
Never mind. I decided to remove the padding, so it will work. Thanks for your help, I appreciate it! – SeinopSys Jan 12 '13 at 16:42
@DJDavid98: Ah, OK. Glad you sorted it out! – BoltClock Jan 12 '13 at 16:54

CSS Selection / Transition property value seems to be wrong

1 Answers1