Skip to content

Instantly share code, notes, and snippets.

@apphp-snippets
Created May 22, 2012 17:03
Show Gist options
  • Select an option

  • Save apphp-snippets/2770294 to your computer and use it in GitHub Desktop.

Select an option

Save apphp-snippets/2770294 to your computer and use it in GitHub Desktop.
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=php-get-remote-ip-address */
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment