Change styles of First/Last Elements in CSS

Submitted by:Tim Kelly

Date added:14 June, 2012

Category:CSS

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

Tags: css elements , change styles

Code Snippet:

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

Comments