can't style <a> element separately from the list

Question

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?

Answer 1

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.