Don't add the css to the link with the active class

Question

is there a way in CSS that you wouldn't add the css to the li?

So here's my example html

<li class="nav-item">
    <a class="nav-link active" id="components-tab" data-toggle="tab" href="#components" role="tab" aria-controls="components" aria-selected="true">
        <i class="la la-lg la-cube"></i> <div><small>Components</small></div>
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" id="blocks-tab" data-toggle="tab" href="#blocks" role="tab" aria-controls="blocks" aria-selected="false">
        <i class="la la-lg la-image"></i> <div><small>Templates</small></div>
    </a>
</li>

So in the links in my li I only want to add the css to the nav-link that does not have the active class.

How can I do this in pure css?

Thank you!

A common way to work around this is to apply the style to all of the items and then overwrite it for the `active` class (Reverting it back to the original style) — DBS, Aug 20 '19 at 11:05

score 0 · Answer 1 · edited Mar 06 '20 at 15:08

Remove active class from a tag and give it to <li> and give all CSS properties in <li> tag and make a tag display:block; and don't give padding into <li> but give it to <a>.

li{
   background-color:#fff;
}
li a{
   color:#000;
}
li.active {
  background-color: #000;
}

li.active a {
  color: #fff;
  padding: 15px;
}

<li class="nav-item active">
  <a class="nav-link" id="components-tab" data-toggle="tab" href="#components" role="tab" aria-controls="components" aria-selected="true">
    <i class="la la-lg la-cube"></i>
    <div><small>Components</small></div>
  </a>
</li>
<li class="nav-item">
  <a class="nav-link" id="blocks-tab" data-toggle="tab" href="#blocks" role="tab" aria-controls="blocks" aria-selected="false">
    <i class="la la-lg la-image"></i>
    <div><small>Templates</small></div>
  </a>
</li>

score -1 · Answer 2 · answered Aug 20 '19 at 11:06

Use the css selector :not(). This styles every element with nav-link class except the one with active class

.nav-item .nav-link:not(.active){
/* your styles */
}

.nav-item .nav-link:not(.active){
color: red;
}

<li class="nav-item">
    <a class="nav-link active" id="components-tab" data-toggle="tab" href="#components" role="tab" aria-controls="components" aria-selected="true">
        <i class="la la-lg la-cube"></i> <div><small>Components</small></div>
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" id="blocks-tab" data-toggle="tab" href="#blocks" role="tab" aria-controls="blocks" aria-selected="false">
        <i class="la la-lg la-image"></i> <div><small>Templates</small></div>
    </a>
</li>

Don't add the css to the link with the active class

2 Answers2