CSS color of List item is not changing

Question

I put a class='active' on the home list item:

Why doesn't it change its color?

 body { background: #000; } #wrapper { width: 68%; margin: 0 auto; /*border:1px solid #000;*/ background: #fff; margin-top: 55px; } .container { padding: 20px; /*border:1px solid red;*/ border-bottom: 3px solid #d6e1df; } #header { /*border:5px solid #4b9f52;*/ padding: 0 100px 0 100px; text-align: center; font: 18px Josefin; color: #bbb; font-weight: 100; padding-top: 0; } #header h1 { font-family: Roboto; font-size: 30px; text-transform: uppercase; font-weight: 100; color: #5d5d5d; /*border:1px solid #000;*/ } ul { margin: 0; padding: 0; } .container>ul>li { display: inline-block; list-style: none; } .container>ul>li>a { display: block; text-decoration: none; color: #bbb; padding: 10px; } .container>ul>li>a:hover { color: #3D9970; transition: 0.5s ease-out; } .active { color: red; border: 1px solid red; } #content { padding: 0 100px 0 100px; } 

 <div id='wrapper'> <div id='header'> <div class='container'> <h1>Chisinau</h1> <p>blog situat intre Prut si Nistru</p> </div> <div class='container'> <ul> <li><a class='active' href="#">Home</a> </li> <li><a href="#">Despre</a> </li> <li><a href="#">Cautare</a> </li> <li><a href="#">En</a> </li> </ul> </div> </div> <div id='content'> <div class='container'> <h1>Post</h1> </div> </div> </div> 

Fiddle Demo

Why doesn't it change? Do I need to change some code?

Answer 1

It is because you have a more specific selector which is setting the color to the a element within li .

.container>ul>li>a{
    display: block;
    text-decoration: none;
    color: #bbb;
    padding: 10px;
}

The specificity of above selector is 013 because it has 1 class selector and 3 element type selectors as part of the complex selector chain. It has no id selector.

Because the color: #bbb is mentioned within this and the .active selector is less specific, the red color is not applied.

Change the selector for the .active class to be like below. This makes it more specific and thus will apply the color to the element.

.container>ul>li>a.active{
  color: red;
  border: 1px solid red;
}

 body { background: #000; } #wrapper { width: 68%; margin: 0 auto; /*border:1px solid #000;*/ background: #fff; margin-top: 55px; } .container { padding: 20px; /*border:1px solid red;*/ border-bottom: 3px solid #d6e1df; } #header { /*border:5px solid #4b9f52;*/ padding: 0 100px 0 100px; text-align: center; font: 18px Josefin; color: #bbb; font-weight: 100; padding-top: 0; } #header h1 { font-family: Roboto; font-size: 30px; text-transform: uppercase; font-weight: 100; color: #5d5d5d; /*border:1px solid #000;*/ } ul { margin: 0; padding: 0; } .container>ul>li { display: inline-block; list-style: none; } .container>ul>li>a { display: block; text-decoration: none; color: #bbb; padding: 10px; } .container>ul>li>a:hover { color: #3D9970; transition: 0.5s ease-out; } .container>ul>li>a.active{ color: red; border: 1px solid red; } #content { padding: 0 100px 0 100px; } 

 <div id='wrapper'> <div id='header'> <div class='container'> <h1>Chisinau</h1> <p>blog situat intre Prut si Nistru</p> </div> <div class='container'> <ul> <li><a class='active' href="#">Home</a> </li> <li><a href="#">Despre</a> </li> <li><a href="#">Cautare</a> </li> <li><a href="#">En</a> </li> </ul> </div> </div> <div id='content'> <div class='container'> <h1>Post</h1> </div> </div> </div> 

The specificity of the modified selector is now 023 because it has one more class selector as part of the complex selector chain.

There is a very good specificity calculator that was built by Keegan Street and is available here . This is very useful till you get fully familiar with specificity calculations.

Answer 2

You can change active class like this

.active {
    border: 1px solid red;
    color: red !important;
}