Search code examples
csshtml-listsbordercss-specificity

Why is my CSS for removing border-right on a class being ignored?

In my code I got border-right on all of my li elements. I'm trying to get rid of the border-right when a li element is active using an own made class named active. The problem is that my class does not remove the border-right.

This is a JSFiddle of the code as well: http://jsfiddle.net/t0a4j5tq/2/

div#navbar {
	width: 250px;
	height: 550px;
	float: left;
}

div#navbar > ul {
	text-align: center; 
	background-color: #EEE;
}

div#navbar > ul > li.li, div#navbar > ul > li.liLast {
	list-style-type: none;
	border-bottom: 1px solid black; 
	border-right: 1px solid black;
	font-size: 25px;
	font-family: Algerian, "Times New Roman";
}

div#navbar > ul > li > a {
	color: black;
	text-decoration: none;
	display: block;
	width: 100%;
	padding: 38px 0;
	
	-webkit-transition: margin-left 0.5s;
}

div#navbar > ul > li > a:hover {
	color: white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 5px black;
	margin-left: 5px;
}

li.active {
    box-shadow: inset 3px 3px 10px #333;
    border-right: none;
}
<div id="navbar">
	<ul>
		<li class="li active"><a href="index.html">Start</a></li>
		<li class="li"><a href="./undersidor/omMig.html">Om mig</a></li>
		<li class="li"><a href="./undersidor/vision.html">Vision</a></li>
		<li class="li"><a href="./undersidor/tjanster.html">Tjänster</a></li>
		<li class="liLast"><a href="./undersidor/kontakt.html">Kontakt</a></li>
	</ul>
</div>

Solution

  • The root of your problem is CSS Specificity. This is important to understand, because simply using !important in your code is a hack and can cause you to have problems later on if you forget that you put it there.

    !important overrides everything, and so obviously should not be used except in dire, last-resort situations (and even then, many people [myself included] would argue that you should figure out how to fix the problem anyway instead of using !important).

    Earlier in your code, you have a CSS selector for the same element (and similar elements):

    div#navbar > ul > li.li {

    Now, you are trying to access the same element with just this:

    li.active {

    But the first selector is way more specific. Instead, you should use the following CSS selector, without the !important hack:

    div#navbar > ul > li.active {