Created
May 22, 2012 17:03
-
-
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).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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