how to bypass style in element that is automatically applied through class?

Question

Hello all

I have got ul-li list in which there is a span element inside all li.
Currently there is a css class that is applied to that span element [or, so to say, the span elements inside all li] like:

.detail_div ul li span{
//some styles
}

Now for a particular span element inside, say, last li, i want to bypass the above given (default) css class and give different style.
How can I achieve this?

Please help me out.
Thanks.

Answer 1

.detail_div ul li span {
   // Some Styles
}
.detail_div ul li:last-child span {
   // UNDO above styles
}

The second definition only matches the last li.

Edit: Or you can assign the list items you wish to unstyle a new class:

<ul>
   <li><span>Styled</span></li>
   <li class="unstyled"><span>Unstyled</span></li>
   <li><span>Styled</span></li>
</ul>

css:

.detail_div ul li span {
   // some styles
}
.detail_div ul li.unstyled span {
   // undo above styles
}

Or you can use the nth-child pseudoclass.

Answer 2

If just declaring the style again doesn't work. E.g.:

.detail_div ul li span{
  color: red;
}

Then put !important after the style. E.g.

.detail_div ul li span{
  color: red !important;
}

For the last item, add :last-child. E.g.

.detail_div ul li:last-child span{
  color: red !important;
}

And for something in the middle, use :nth-child(number). E.g. second LI:

.detail_div ul li:nth-child(2) span{
  color: red !important;
}