CODEWITHSUNDEEP
htmlcsscss-selectorscss-specificity
JasonGenX
JasonGenX

Reputation: 5434

can't style <a> 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?

Upvotes: 1

Views: 57

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240878

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.

Upvotes: 5

Related Questions