apphp-snippets: 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).

Language: CSS
Tags: Elements

Change styles of First/Last Elements in CSS

Copy & Paste Mode Embed

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

Comments

Lamb 2012-08-01: does not work in IE 7,8,9