Posted By

apphp-snippets on 03/05/13


Tagged

css element first


Versions (?)

Change styles of First/Last Elements in CSS


 / Published in: CSS
 

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

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

  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>

Report this snippet  

You need to login to post a comment.