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


Tags: css

Problem :

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 :

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


    CSS Howto..

    How to have different layout orders for same html code for desktop and desktop using css or javascript (not jquery)

    How to change decoration of a local HTML file to show it on the WebView in Android

    how to override the ice:commandLink css

    how to align div horizontally using CSS?

    how to add multiple images to a css header?

    How to create css code that works for all browser?

    How do I select an element in the dom with an attribute of ct:value?

    How to vertically align both image and text side by side in a div

    Resize the content of a div based on how many objects are in the div

    How to move div to top and remove?

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    how to pass context value to css

    How do I suppress errors in IntelliJ Idea 12

    How can you implement a grabbing cursor icon in Chrome?

    how to write css to reduce font size [duplicate]

    How do I apply an image to background using inline CSS?

    How can i auto rotate this carousel

    How to create a Page Header (an Image) for print using css

    jQuery hide / show class not changing css for future added elements

    How to achieve this diagonal drop down effect with CSS?

    How to use a different font CSS color for all Internet Explorer browser versions?

    How can I make a scrolling DIVs background transparent?

    How to make nav and right block fixed, also keep the whole container is in center?

    how do i hide anchor text without hiding the anchor

    How to get css value of an element inside array?

    How to center a image with transparent background in css?

    How to put more than one class in css not() selector?

    How to fade out after hover is done using CSS

    How to make a menu have submenus in pure CSS

    How do I get one element to respond to the click of another element? - CSS/jQuery