0

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!

Improve this question
1
  • 2
    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) Commented Aug 20, 2019 at 11:05

2 Answers 2

Reset to default
0

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>

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

Comments

-1

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.