CSS3 Child Pseudo-Selectors: How To Single Out the Special Children


When working with HTML lists, there will be a time when you want to modify the styles for the first or last item in the list. For example, maybe you increase the margin between each item, but also need an additional buffer before the first item or after the last item in the list.

This has traditionally been solved using special CSS classes that are applied to only the first and last items in the list. But wouldn’t it be nice if the HTML markup only had to worry about the content and your styles could deal with selecting and styling the first/last items in the list?

Enter the CSS3 selectors of “first-child” and “last-child”. These selectors aren’t anything new as they have been part of the CSS3 spec for years. But I find this design pattern coming in handy frequently, so it’s worth repeating here.

For the examples below, let’s use an unordered list of items. In this case, our items are characters from Game of Thrones.

 
<div class="hero-unit">
  <p>Game of Thrones Selector Fun</p>
  <ul>
    <li>Tyrion</li>
    <li>Jaime</li>
    <li>Cersei</li>
    <li>Daenerys</li>
    <li>Jon</li>
    <li>Tywin</li>
    <li>Bran</li>
  </ul>
</div>

###first-child, last-child The pseudo-selectors of “first-child” and “last-child” give that additional level of control for styling just the first or last elements in a collection of child elements, and let you do that without cluttering up your markup with additional classes.

For example, using the “last-child” selector, you can easily modify the bottom margin of the last item in the list to match the top margin that is already applied to all of the items in the list.

 
ul {
    border: 1px solid black;
    list-style-type: none;
}

li {
    margin-top: 10px;
}

li:last-child { 
    margin-bottom: 10px;
}

###nth-child The “nth-child” pseudo-selector gives you even more control, allowing you to select a specific occurrence of a child element. Let’s say you want to style the background color of the 2nd item in the list. No big deal with the “nth-child” pseudo-selector. Just remember that the first item in the list is element 1 - no zero based lists here!

 
ul {
    border: 1px solid black;
    list-style-type: none;
}

li {
    margin-top: 10px;
}

li:last-child { 
    margin-bottom: 10px;
}

li:nth-child(2) { 
    background-color: #C0C0C0;
}

###Even and Odd Children For our Game of Thrones character list, just changing the background color of the 2nd item in the list isn’t that useful. But, we can use the same pseudo-selector to style the background color of all of the even/odd items in the list. To do this, we use the “even” or “odd” keyword with the nth-child selector to select just the even/odd items.

 
ul {
    border: 1px solid black;
    list-style-type: none;
}

li {
    margin-top: 10px;
}

li:last-child { 
    margin-bottom: 10px;
}

li:nth-child(even) {
    background-color: #C0C0C0; 
}

###Browser Support Whenever we discuss CSS, it’s worth reviewing the browser support for these selectors. As of this time, all of these selectors are supported in the latest versions of the major desktop and mobile browsers, but some browsers (a’hem - IE) did not support all of these selectors until more recently. For example, IE has supported the “first-child” selector since IE7, but did not add support for “last-child” or “nth-child” until IE9.

Related Posts

There Are No Problems, There Are No Challenges

The Ruby Koans Are Still Awesome

If We Aren't Focusing on Shipping, Then What The Hell Are We Doing?

CodeStock 2013 - Conference Wrap Up

CodeStock 2013 - Agile Retrospectives for High Performing Teams

More Effective Daily Scrums with the TFS 2012 Task Board

Visual Studio 2012 Application Lifecycle Management Virtual Machine & Labs with VirtualBox

Organizing Your TFS Build Definitions with Inmeta Build Explorer

Webinar: Continuous Deployment with Team Build and MSDeploy

Heterogeneous Development with Team Foundation and Visual Studio 2010