Quick Tip: Work Backward to Understand Structural Pseudo Classes
videos

Quick Tip: Work Backward to Understand Structural Pseudo Classes

on Dec 16th 2010 with 42 comments
Tutorial Details

Have you ever seen those scary looking CSS structural pseudo classes, like li:nth-child(4n+2)? Can you enunciate exactly what that means? If not, don’t worry; I’ll teach you how easy this is to understand — once you work backward!


Subscribe to our YouTube page to watch all of the video tutorials!

See What I Mean?

The key to figuring these things out is to work from right to left! Now it’s easy to understand. If you enjoyed this video quick tip, don’t forget that we have a seemingly never-ending span of video quick tip on Nettuts+ – ranging from .NET, to CSS, to JavaScript!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.sz-media.org Nico Poggenburg

    offtipic: buffer buffer buffer

  • http://www.monkey-house.ca Greg

    Nice one, Jeffrey. Writing the rule right to left makes instant and obvious sense…. after you explained it…. like all great lessons. ;-)

  • Lukas

    Doesn’t work in IE though :(

    • Johan

      Is that really an issue?
      Is does not work in Lynx either and that’s not considered a huge problem.
      Stop supporting bad browsers.

      • Johan

        Just want to add that Lynx is not a bad browser because it delivers what it promise to do – render text-pages.

      • http://www.josegaldamez.com Jose Galdamez

        It depends. At some places IE is the forced browser. For example, at my job we let each workstation choose their browser. We highly encourage Chrome for those who are willing to use it. Many of our clients, however, are government agencies and they are stuck with IE 7. They have no choice.

        This is all a moot point anyway since this JS library makes it so that CSS3 selectors work in IE6-8.

        http://selectivizr.com/

        Problem solved?

      • http://pixelcoder.co.uk Alistair

        The reason IE exists in Government not that anyone asked this question is they have to eat their own dog food on things that are forced.

        We live in the engineered state, and as long as their is money to be made IE will exist and fail to anything but the bare minimum time and time again.

        IE should die.

        I’m gonna start a movement, who’s with me? lol

  • http://www.madfrogdesigns.com/ Julesfrog

    Thanks Jeff! This is a great tutorial. I can think of so many ways to use this technique now.

  • http://matt-bridges.com/ Matt Bridges

    Fantastic. I have not had a chance yet to do anything like this in any of my projects, but hopefully some day! Well done, as always, Jeffrey!

  • http://eriknow.com Erik

    I dreaded using this until just now. GREAT explanation!

  • cMURKonAfool

    Very cool. There have been several situations that I could have used this. Thanks!

  • http://www.patrickkivits.com Patrick Kivits

    Wow this is awsome, i never even knew this was possible !

    Is this fully supported in IE also ?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      No – you can use Selectivizr instead.

      It’s a CSS3 module.

    • Andrew

      No. lte IE 8 and FF 3.0 won’t support.

    • Zee Caniago

      Good question. I have been wondering about that too :) Good Tutorial!

      • http://pixelcoder.co.uk Alistair

        Again thanks for pointing out the downright obvious solution to those who wish to adopt the progressive enhancements and push for browser support.

        The follow up tutorial

        http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt/

        Is an excellent resource to those looking to use the new and modern way.

        Surely if we all start making our pages a bit more bloaty for a better experience IE will be forced to comply?

        That’s the movement right there, “Bloat IE, because it’s so greedy”. The Mr. Creosote of the web World.

  • http://zecel.com Shishant Todi

    Long time after seen a envato intro on video.

  • Ricardo Nunes

    Just one thing…

    OMFG! Jeffrey you are unstoppable!

    You’re getting a thon of fans, me included

  • David

    Genius! I never understood those before.
    And it makes so much sense. I will start using them immediately.

    Thanks so much.

  • Andrei

    “Yeah, you could use PHP, but that`s lame”

    Hahaha, for some reason that cracked me up.

    Well this will definitely come in handy, thanks!

  • Daniel

    Nice one Jeffrey!

    My way of thinking of it is to look at the “n” as an iterating number starting from 0 and then increasing so that it’s, for the leftmost column 0*4+1=1th, 1*4+1=5th etc. Like a maths function! ;)

  • James

    I’m a maths student so I understood it, but decided to watch anyway.

    I love how easily you explain things Jeffrey. You really dumb things down and it’s nice to see!

  • Jozan

    4n+1 = Every fourth item + make starting point to be the first item. It is like arithmetic progression.

    • James

      That’s exactly what it is. Set n = 0 then work out your values as it progresses:
      4(0) + 1 = 1
      4(1) + 1 = 5
      4(2) + 1 = 9

  • http://thimk.22web.net Thim

    OMG thanks Jeff! I’ve had problems with this before but now I understand it alot more. Thanks again! (:

  • http://www.thedevelopertuts.com Bratu Sebastian

    Yeah, thanks for the quicktip. It it a bit tricky when you use it for a client.

    But when you have clients who want IE6 + all browsers you need php and it’s easier usually, just use:

    if( $index % number ){
    //do some <br/> or <span style=”clear: left;”> </span>;
    }

    where number is 3, 4 or any other number … and when you put it into a helper function … that’s easier.

    I always like to use a function in a php loop like: oddity(‘<span class=”clear”></span>’, 4) :))

    • http://www.josegaldamez.com Jose Galdamez

      I think the CSS3 solution is more elegant. It’s a matter of adding one more CSS class as opposed to writing in some extra logic. If the PHP is spaghetti code it could take considerably longer to figure out.

      For older browsers like IE6 this JS library forces the CSS3 selectors to work.

      http://selectivizr.com/

  • leo rapirap

    Sound easy to me! perfectly explained. well done Jeffrey Way!

  • http://www.kbriody.info briodyk

    Great article Jeff! Definitely helps me out a ton more than learning it on my own :D

  • Brad

    Chris Coyer also has a great tool for figuring this out, although its important that you learn it the way Jeffery described it.

    http://css-tricks.com/examples/nth-child-tester/

  • http://pixelcoder.co.uk Alistair

    Thanks for the tutorial Jeffrey, great explanation for the backwards count.

    Guess in a list of items with 2 columns, all you need is even and odd then.

  • Alexander Baldwin

    It seems bizarre to me that the first element “4n-2″ selects is the 6th and not the second :\ but I suppose Mathematics and Computing always will have their differences.

    Also found that http://css3pie.com/ is a good alternative to selectivizr for projects where disabled JavaScript is a concern.

  • http://jamiebrewer.com Jamie

    Great tut! I can see myself styling tables pretty easily with the concepts.

  • Diego Rangel

    Ok, very good. But it works in IE???

  • Jeremy Michel

    Great Quick Tip, who said that web dev had nothing to do with math :D

  • http://www.maiconweb.com Maicon Sobczak

    Great explanation Jeffrey. Simple and with a useful trick.

  • kev

    hi jeffrey, could you do a quick tip on when and how to use clearfix?

  • Nelson

    thank you!
    I have to watch it again.

  • Greg

    Does anyone really use, in real life, those weird CSS3 statements???

  • http://lillyforeman.co.cc/ Lilly Foreman

    Thanks for the tutorial Jeffrey, great explanation for the backwards count. Guess in a list of items with 2 columns, all you need is even and odd then.

  • Mikhaila Uy

    Doesn’t work with IE6/7 but i don’t care, i don’t support this evil browser anymore, we should start to move forward now.

  • http://spuaschapucillas.blogspot.com/ Chapucillas

    Good explanation but not so difficult to understand