Advanced Search

Return to Snippet

Revision: 62667
at March 5, 2013 20:12 by apphp-snippets
Initial Code 
<style type="text/css">
p.first { margin-top: 0 !important; margin-left: 0 !important; }
p.last { margin-bottom: 0 !important; margin-right: 0 !important; }
/* or */
div#articles p:first-child { border:1px solid #c1c13a; }
div#articles p:last-child { border:1px solid #3ac13a; }
/* or */
div#articles > :first-child { text-align:left; }
div#articles > :last-child { text-align:right; }
</style>
 
<div id="articles">
 <p class="first">1st article: lorem ipsum dolor sit amet...</p>
 <p>2st article: lorem ipsum dolor sit amet...</p>
 <p>3st article: lorem ipsum dolor sit amet...</p>
 <p>4st article: lorem ipsum dolor sit amet...</p>
 <p class="last">5st article: lorem ipsum dolor sit amet...</p>
</div>
Initial URL 
http://www.apphp.com/index.php?snippet=css-change-styles-first-last-element
Initial Description 
Sometimes it's desirable to change a style of the first and/or last elements in a container. You can do this by manually applying classes to your HTML elements: ("last-child" still not supported in IE8).
Initial Title 
Change styles of First/Last Elements in CSS
Initial Tags 
css
Initial Language 
CSS