CSS Snippet: Change Styles of First/Last Elements

You can change the style of first and/or last elements in a container by applying classes to your HTML elements: (“last-child” still not supported in IE8).

<style type="text/css">
p.first { margin-top: 0 !important; margin-left: 0 !important; }
p.last { margin-bottom: 0 !important; margin-right: 0 !important; }

div#articles p:first-child { border:1px solid #c1c13a; }
div#articles p:last-child { border:1px solid #3ac13a; }

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>2nd article: lorem ipsum dolor sit amet...</p>
 <p>3rd article: lorem ipsum dolor sit amet...</p>
 <p>4th article: lorem ipsum dolor sit amet...</p>
 <p class="last">5th article: lorem ipsum dolor sit amet...</p>
</div>

Result

1st article: lorem ipsum dolor sit amet…

2nd article: lorem ipsum dolor sit amet…

3rd article: lorem ipsum dolor sit amet…

4th article: lorem ipsum dolor sit amet…

5th article: lorem ipsum dolor sit amet…