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).
[View All Snippets]
[View All Snippets]
Show Plain Text »
Result:
- <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>
Result:
1st article: lorem ipsum dolor sit amet...
2st article: lorem ipsum dolor sit amet...
3st article: lorem ipsum dolor sit amet...
4st article: lorem ipsum dolor sit amet...
5st article: lorem ipsum dolor sit amet...