Change styles of First/Last Elements in CSS

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

Usage


Comments

Add your comment

Need a COVID-19 website?
Preview
Or
Contact us

No, thanks!