Advanced Search

Change styles of First/Last Elements in CSS

/ Published in: CSS
Save to your folder(s)
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).

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. p.first { margin-top: 0 !important; margin-left: 0 !important; }
  3. p.last { margin-bottom: 0 !important; margin-right: 0 !important; }
  4. /* or */
  5. div#articles p:first-child { border:1px solid #c1c13a; }
  6. div#articles p:last-child { border:1px solid #3ac13a; }
  7. /* or */
  8. div#articles > :first-child { text-align:left; }
  9. div#articles > :last-child { text-align:right; }
  10. </style>
  11.  
  12. <div id="articles">
  13.  <p class="first">1st article: lorem ipsum dolor sit amet...</p>
  14.  <p>2st article: lorem ipsum dolor sit amet...</p>
  15.  <p>3st article: lorem ipsum dolor sit amet...</p>
  16.  <p>4st article: lorem ipsum dolor sit amet...</p>
  17.  <p class="last">5st article: lorem ipsum dolor sit amet...</p>
  18. </div>

URL: http://www.apphp.com/index.php?snippet=css-change-styles-first-last-element

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.