Quick Tip: Styling First and Last Child Elements

In this tutorial I’ll be explaining how to style only the first and last child list elements using a pseudo class you probably haven’t heard of. You can use these class in a number ways in your designs, this is just one of them.

In Blog, HTML & CSS

View The Demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

How The Pseudo Class Works

Quite simply the class styles either the first or last list elements, you can also combine the two together and style both the first and last list elements together. You might be thinking big deal but in some cases it can prove useful. Imagine you have list in your sidebar with a bottom margin on each list element, the very last list element always seems to look odd especially if you have a divider underneath the list separating sidebar content.

The pseudo class looks like this.

1
2
3
4
5
/*First Child Pseudo Class*/
li:first-child {

/*Last Child Pseudo Class*/
li:last-child {


How To Use The Classes

In a newly created HTML document I’ve simply created 3 lists each with there own classes. List1, list2 and list3, the first list will have only the first child list element, list2 will have only the bottom child list element styled and finally list3 will have both pseudo classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<ul class="list1">
<li>A List Element (This List Element Doesn't Have A Border)</li>
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element</li>
</ul>

<h1>Styling Last Child Elements</h1>

<ul class="list2">
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element (This List Element Doesn't Have A Border)</li>
</ul>

<h1>Styling First And Last Child Elements</h1>

<ul class="list3">
<li>A List Element (This List Element Doesn't Have A Border)</li>
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element</li>
<li>A List Element (This List Element Doesn't Have A Border)</li>
</ul>

Adding The Pseudo Classes

In a stylesheet after styling each list element simply add the list class followed by the pseudo class “first-child”, which will style only the first child list element.

1
2
3
4
5
/* LIST 1 STYLING */
.list1 li:first-child {
    color: #F00;
    border:none
}

In a stylesheet after styling each list element on the second list simply add the list class followed by the pseudo class “last-child”, this will style only the last child list element.

1
2
3
4
5
/* LIST 2 STYLING */
.list2 li:last-child {
    color: #F00;
    border:none
}

On list3 simply add both of them after styling the list elements, adding both pseudo classes combined will style both first and last list child elements.

1
2
3
4
5
/* LIST 3 STYLING */
.list3 li:first-child, .list3 li:last-child {
    color: #F00;
    border:none
}

Conclusion

Thanks for taking part in this tutorial, if you have any comments or questions then feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.


  1. May 18, 2012 at 7:58 AM

    Hi Richard,
    I never knew you could style the first or last by doing it this way. It will be really useful when I have to develop my next web design project. I would of normally been adding classes onto them. I was wondering whether it is possible to do the same sort of thing but have it so you can style lets say, every 4th ?
    I really appreciate you sharing this technique and would like to thank you for your hard work since you are teaching me many new things and giving me more inspiration for my own work.

  2. May 22, 2012 at 4:43 PM

    @josh
    You could usejQuery for that, i think it supports an nth-child selector

  3. June 5, 2012 at 4:15 AM

    I really appreciate you sharing this technique and would like to thank you for your hard work. im also glad your still doing this

  4. Mann
    June 17, 2012 at 5:58 PM

    Thanks for sharing, I never knew this thing even existed. ^^’

  5. Blake
    June 28, 2012 at 2:30 PM

    Wow, what convenience! I was just making a new page composed of many lists and the first item in all of the lists always has some different styling. This will work great!

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 5 Comments On Quick Tip: Styling First and Last Child Elements, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php