CODEWITHSUNDEEP
htmlcss
Artem Svirskyi
Artem Svirskyi

Reputation: 7849

text-shadow overwrite

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?

Upvotes: 0

Views: 2171

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

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:

Upvotes: 4

Related Questions