Change styles of First/Last Elements in 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).
<style type="text/css">
/* Source: http://www.apphp.com/index.php?snippet=css-change-styles-first-last-element */
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>
Usage
Contribute
Want to share your source code? Create your account and join our community!
Comments
Add your comment