can’t style element separately from the list

I have a ul:

<ul class="myListClass">
  <li><a class="theSelected" href="#">one</a></li>
  <li><a href="#">two</a></li>
  <li><a href="#">three</a></li>
</ul>

the color of the text is applied through styles:

.myListClass li a {
  color: red;
}

I want the class theSelected to have a different color, but this has no effect on the style:

.theSelected { color: white; }

Any idea why?


solution

It’s because the selector .myListClass li a is more specific than .theSelected.

One option would be to increase the specificity of .theSelected to something like:

Example Here

.myListClass li a.theSelected {
  color: white;
}

You could also decrease the specificity of the previous selector too.


For what it’s worth, here is the specificity calculation of each selector:

  • .myListClass li a - 12
  • .myListClass li a.theSelected - 22
  • .theSelected - 10

Here is a helpful link for automatically calculating these values.