Grow your CSS skills. Land your dream job.

Useful :nth-child Recipes

Published by Chris Coyier

I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!

In these simple "recipes" (really: expressions) I'll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to alter them to get similar selections.

Select Only the Fifth Element

li:nth-child(5) {
    color: green;   
}

To select the first element, you can use :first-child, or I bet you can guess how to alter the above to do it as well.

Select All But The First Five

li:nth-child(n+6) {
    color: green;   
}

If there were more than 10 elements here, it would select all of them beyond 5.

Select Only The First Five

li:nth-child(-n+5) {
    color: green;   
}

Select Every Fourth, Starting At The First

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

Select Only Odd or Even

li:nth-child(odd) {
    color: green;   
}

li:nth-child(even) {
    color: green;   
}

Select The Last Element

li:last-child {
    color: green;
}

Selects the 10th because we have 10 elements here, but if there was 8 it would select the 8th, or if there were 1,290 it would select the 1,290th.

Select the Second to Last Element

li:nth-last-child(2) {
    color: green;
}

Selects the 9th because we have 10 elements here, but if there were 30 elements it would select the 29th.

Wanna play?

Try the tester.

Browser Support

Interestingly enough, :first-child was supported by IE 7, but it's not until IE 9 where the rest of this stuff is supported. Other than IE there isn't much browser support concern, and if you are worried about IE, then use Selectivizr. If browser support stuff is interesting or important for you, definitely check out When can I use... which tracks this stuff very well.

Comments

  1. Simply fully useful !! Thanks

  2. Permalink to comment#

    Nice list, but am colorblind or are you mixing up green and red? Still, a nice list. Too bad IE doesn’t support this until IE9 (as you mentioned here)

    • Robbert
      Permalink to comment#

      Actually Chris did you color with means the text is supposed to be green, and in the examples there is no text ^^.

    • Robbert
      Permalink to comment#

      I mean red :P

    • Permalink to comment#

      I caught that too, definitely there just to illustrate the situation but it was goofy to see a green ball and immediately read color: red!

    • Ohhhh I get it. At first I was like what they heck are these guys talking about. I changed the word “red” to “green” just so it seems less weird. They are both just hypothetical.

  3. Great article, Chris! I actually didn’t know nth-child accepted these values as parameters. I really need to fiddle around more with CSS3, since I don’t want to rely on it yet in production.

    A lot of kindergarten scenarios come to mind when looking at the odd numbered string of balls. Btw. Was it you who did that background trickery with textures and prime numbers? Maybe something for nth-child to solve?

  4. Chris
    Permalink to comment#

    Thanks for another great explanation Chris, if I’m not mistaken and correct me if I’m wrong but doesn’t jQuery already have most support for CSS3 pseudo selectors already built into Sizzle??

  5. Perhaps a gratuitous solution for IE, but you can also use Chrome Frame to enable this (and CSS gradients, and animations, and all the rest) there.

  6. Thanks for this resource! I’ve been looking for a guide that laid out clearly the different options for :nth-child selectors and this is the best I’ve seen. :nth-child are a vital piece of good CSS and I’ll definitely be taking advantage of it. Thanks again!

  7. Chris is there any fix for lower IE versions ?

    Thanks

  8. i’m still fresh to this method but still giving it a fair suck of the sav and i think i’ve only scratched the surface.

  9. Good job!!
    I can be translated into Chinese release?

  10. Great! It’s very useful for me.

  11. Permalink to comment#

    Thank you so much – I’ve been looking for how to use nth-child!

  12. Chris this article was great, so easy to understand and so usefull.
    By the way, I know you’ve been watching your stats to know which resolution your visitors use. In this right moment I’m using a Blackberry 9800 and I can’t believe how well your web fits to the screen and how well it works, great work!! I didn’t need to use horizontal scrollbar all along the article as happens with most of this blogs, so thank you for that :)

    • Rob
      Permalink to comment#

      I believe that is due to the media queries in their CSS. The page collapses depending on the size of the window/viewport. Load the main page in a desktop web browser and reduce the horizontal size of the window, the page readjusts to fit a large number of widths.

  13. Great article Chris, there is some stuff I didn’t know yet!

  14. Hi Chris,

    just want to say “thank you”. Your articles are real lifesaver. And it is so fantastic and awesome, to find all necessary css-tricks on one website.

    THANK YOU!

    Angelika (aka Lintzy)

  15. Permalink to comment#

    IE 7 only partially supports :first-child. If an HTML comment precedes the first element, the :first-child selector won’t take effect.

  16. Some guy
    Permalink to comment#

    Even though old browsers doesn’t support these properties, you can still use jQuery.

  17. Nice feature list. IE always disappoints as usual

  18. Ohne Mitleid
    Permalink to comment#

    Thank you Chris! I share your enthusiasm for new :nth-child usage!

    I don’t really have a site to show you, only some CSS styles I have worked out. Two new uses for me. I needed CSS to exhibit different behaviors on hover to display text to the left and then at the halfway point, to the right. Rather than going into a lengthy explanation of what I actually did, you can look at the code and how I applied it here.

    The second example uses odd/even for something aside from coloring alternating columns/rows in a table layout. I took a column of screenshots, positioned them left and right (odd/even) then used odd/even hover to zoom the image based on the odd/even so the zoom would display correctly. That one is here .

    If no one else can see how Chris’ explanation of how all of the various nth-child examples can be usefully tied together, think about this: a volume control or other slider. First child, speaker highlighted, volume max. Second to the last child, nth-last-child(2), highlighted again, minimum volume. Last-child, speaker mute (usually displayed as the red cross out). I can’t wait to code it!

    Please show mercy if I’m not quite up to speed on this. I realize it might not cover every browser available. I’ve only been at it for about 1-1/2 months.

  19. Permalink to comment#

    Nice article.

    I too love using :nth-child now when I’m coding up sites. Less code bloat and its surprising how many situations it comes in handy for.

  20. Niall
    Permalink to comment#

    Hey Chris
    Thanks for the heads up on Selectivizr, I’ve just used the wordpress plug-in version for my :nth-child navbar – works a treat

  21. Mark Wassmer
    Permalink to comment#

    Selectivizr (http://selectivizr.com/) is a great utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8, very much worth having a look at, Nice JS for PE

  22. Adnan

    Very Nice…

  23. Best article I’ve seen on this! Thanks Chris.

  24. I stumbled across this page trying to see if the :nth-child selector could be used to style a range of columns in a table (i.e. columns 4-6). I was able to accomplish the task using a combination of :nth-child and :nth-last-child. To mimic the provided examples, this would be something like:

    li:nth-child(n+4):nth-last-child(n+5)
    

    Figured I would post this in case anyone else is looking for a “nth-child range” selector.

  25. Guri

    Thanks for the cool css tutorial. I’m trying to do something different, I want to select every 4 div elements
    like 1-4 have different background, 5-8 have different background, 9-12 have same as 1-4, 13-16 have same as 5-8. Please help me how to accomplish this. Note: total number of div is variable.
    thanks

  26. Brian
    Permalink to comment#

    So I’d like to be able to hide a certain amount of text inside of a paragraph when it comes to a certain breakpoint. I assume the method mentioned here wouldn’t accomplish that, right? Is there a method that would perform that via css3 or is that only done in PHP or JS?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".