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



Question:

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.


Solution: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.


Solution: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;  }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »