pleasega pleasega - 12 days ago 6
CSS Question

Select whole body except a class in body

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.

Answer

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>

Comments