0

I would like to change the look of all anchor tags in the body except ones in the navbar, I tried:

a:not(.navbar) a {
    color: #333;
}

a:hover:not(.navbar): {
    color: #999;
}

But it doesn't work, all tags became the same. Is this possible?

EDIT: I have some other attributes such as transitions as well, so I can't set the restore the values for the rest.

pleasega
  • 543
  • 1
  • 3
  • 21

2 Answers2

3

Have you tried selecting .navbar a tags and restoring their values?

a {
    color: #333;
}

a:hover {
    color: #999;
    transition: color 2s;
}

.navbar a,
.navbar a:hover {
    color: initial;
    transition: none;
}
Sunny Patel
  • 7,830
  • 2
  • 31
  • 46
  • Sorry for not mentioning above but I have some other attributes as well, bunch of transitions, the above was just to get hold of the logic. – pleasega Nov 21 '16 at 16:00
  • You should still be able to keep those; just override the [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) for `.navbar a` type selectors with the `color: ` property. – Sunny Patel Nov 21 '16 at 16:03
  • The transitions and all other styles will still be there. you only overwrite what you need. And, in general, is better to use selectors/pseudo-selectors that have enough cross-browser support (and `:not` don't fit that well here). – n1kkou Nov 21 '16 at 16:03
  • Sorry for the confusion. I wanted my body anchor tags to have those transitions but the navbar anchor tags not to. If it was the opposite I would be able to use it, or a better way I would too. – pleasega Nov 21 '16 at 16:09
  • Then override those transitions within the `.navbar a` selector. See updated answer. – Sunny Patel Nov 21 '16 at 16:12
2

I think the code is quite self-explanatory, but I'll explain it:

Select all divs except the ones with class "navbar", and to all links inside those apply certain styles.

div:not(.navbar) a {
    color: #333;
}

div:not(.navbar) a:hover {
    color: #999;
}


div:not(.navbar) a {
  color: red;
}
div:not(.navbar) a:hover {
  color: green;
}
<div>
  <a href="#">link</a>
</div>

<div class="navbar">
  <a href="#">link should NOT be red</a>
</div>

<div>
  <a href="#">link</a>
</div>
Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • @n00dl3 it should but I'm not sure if its [good for performance](https://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful) – Alvaro Nov 21 '16 at 16:04
  • Yes, it will, but Alvaro is right, the performance is very poor when using `*` selector. – n1kkou Nov 21 '16 at 16:06
  • If the anchor tag is very deep inside, like in another few `div`,`ul` and `li`, will it still work? Is it possible to get it to work? – pleasega Nov 21 '16 at 16:11
  • 1
    `:not()` is not good for performance neither, I'm just talking of what will work even if it's not wrapped in a div. – n00dl3 Nov 21 '16 at 16:11
  • @pleasega as long as the link is not a children of that div it will work. – Alvaro Nov 21 '16 at 16:13