Overriding CSS property

Question

I think I am overlooking something. I have this code where I am trying to change the color of list element text to signal that it is inactive. Shouldn't the second style take precedent over the first? Inspector says the inactive style is getting preference over the menu_simple ul li a.

Here is the Code:

.menu_simple ul li a {
  color: #FFF;
  padding: 0px;
  margin: 0px;
  background-color: #262831;
  display: block;
  width: 240px;
  height: 68px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  font-size: 30px;
  z-index: 99999;
}

.inactive{
    color: #333333;
}

  <div class="menu_simple">
  <ul>
  <li><a href="#">Java</a></li>
  <li><a class="inactive">Python</a></li>
  <li><a class="inactive">C</a></li>
  <li><a class="inactive">Ruby</a></li>
  <li><a class="inactive">Javascript</a></li>
  <li><a class="inactive">C#</a></li>
  <li><a class="inactive">PHP</a></li>
  <li><a class="inactive">Objective C</a></li>
  <li><a class="inactive">SQL</a></li>
  <li><a class="inactive">CSS</a></li>
  <li><a class="inactive">Perl</a></li>
  <li><a class="ion-ios-plus-outline" href="#"></a></li>



  </ul>
  </div>

Click "► Run code snippet"... You put your css in the html box, and your html is missing. — apaul, Jan 24 '16 at 01:40
maybe your CSS is not cascaded the way you want it - could be overridden by another rule, check through web developer inspector — Aziz, Jan 24 '16 at 01:44
I did and it is using the top over the bottom. Shouldn't it use the bottom over the top? — Reid Barber, Jan 24 '16 at 01:46
.menu_simple ul li a.inactive { color: #333333; } worked thanks @Aziz — Reid Barber, Jan 24 '16 at 01:48
Just as a rule for future styling, the more specific targeting rule in CSS is the one that will have the higher priority, e.g. → `div.test` has higher priority than `.test`. — Drew Kennedy, Jan 24 '16 at 01:51

dippas · Accepted Answer · 2016-01-24T01:49:49.110

This is all about Specificity,

The concept

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

How is it calculated?

The specificity is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.

In case of specificity equality, the latest declaration found in the CSS is applied to the element.

Some rules of thumb

Never use !important on site-wide css.

Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).

Never use !important when you're writing a plugin/mashup.

Always look for a way to use specificity before even considering !important

can be represented by 4 columns of priority:

inline = 1|0|0|0

id = 0|1|0|0

class = 0|0|1|0

element = 0|0|0|1

Left to right, the highest number takes priority.

so you just have to do this :

.menu_simple ul li a {
  color: #FFF;
  padding: 0px;
  margin: 0px;
  background-color: #262831;
  display: block;
  width: 240px;
  height: 68px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  font-size: 30px;
  z-index: 99999;
}

.menu_simple ul li a.inactive{
    color: #333333;
}

<div class="menu_simple">
  <ul>
  <li><a href="#">Java</a></li>
  <li><a class="inactive">Python</a></li>
  <li><a class="inactive">C</a></li>
  <li><a class="inactive">Ruby</a></li>
  <li><a class="inactive">Javascript</a></li>
  <li><a class="inactive">C#</a></li>
  <li><a class="inactive">PHP</a></li>
  <li><a class="inactive">Objective C</a></li>
  <li><a class="inactive">SQL</a></li>
  <li><a class="inactive">CSS</a></li>
  <li><a class="inactive">Perl</a></li>
  <li><a class="ion-ios-plus-outline" href="#"></a></li>



  </ul>
  </div>

Thanks! This is what I was looking for. I forgot about specificity. — Reid Barber, Jan 24 '16 at 01:49

score 1 · Answer 2 · answered Jan 24 '16 at 01:47

1

try this

.menu_simple ul li a.inactive {  color: #333333; }

answered Jan 24 '16 at 01:47

Aziz

7,685
3
31
54

Overriding CSS property

2 Answers2

The concept

How is it calculated?