CODEWITHSUNDEEP
htmlcss
Artem Svirskyi
Artem Svirskyi

Reputation: 7839

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: 2164

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

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