Question

HTML

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#" class="active">About</a></li>
</ul>

CSS

ul li:nth-child(even) a {
    text-shadow: 1px 1px 1px red;
}

.active {
    text-shadow: none;
}

And second list item still have shadow. why?

Answer 1

it’s a matter of specificity: the first rule wins because it has a bigger specificity (calculated as 1 pseudoclass and 3 elements: 13) than the second (1 class only, no elements: 10) : you should write instead

ul li:nth-child(even) a.active {
   text-shadow: none;
}

or – in general – any other valid rule with a specificity greater or equal than 13.

If you cannot change the second selector you may simply use !important applied on the property, but its use should be limited as less as possible.

---

For further information, see also:

• this reference about the specificity (MDN);
• this article on Smashing Magazine about the specificity and how to calculate it.