Quick Tip: Styling First & Last Child Elements

Quick Tip: Styling First and Last Child Elements

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.


About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

5 comments
Josh Lake says

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.

Reply
mansie says

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

Reply
Midnet says

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

Reply
Mann says

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

Reply
Blake says

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!

Reply
Add Your Reply

Popular posts

css.php