Keeping Your Elements’ Kids in Line with Offspring

by Alex Bischoff

39 Reader Comments

Back to the Article
  1. my i know what u used to mesure the time taken?

    Copy & paste the code below to embed this comment.
  2. Could many of the concepts discussed be implemented using “jQuery”:http://jquery.com/ as well?

    Copy & paste the code below to embed this comment.
  3. There’s a missing closing <code> tag immediately above the heading “All together now”, which makes the last half of the article pretty hard to read.

    In a more legitimate comment, I’d also be interested to see Offspring ported to something like jQuery or (my personal preference) Mootools.

    Copy & paste the code below to embed this comment.
  4. @thirukumaran: To measure the time taken, I created a one-off version of the code in which I checked the Date() object before and after processing the page; by subtracting one from the other, I had the elapsed time. (I then made use of OpenOffice Calc to help keep track of all the numbers and calculate the median values.)

    @Jacob: Yeah, it may be possible to implement some of the functionality with other JavaScript libraries (such as jQuery). All the same, a more specialized library such as this one may be able to offer a lighter set of code than a general-purpose JavaScript library. (And, as it’s tuned toward a specific task, this approach may offer performance advantages as well.)

    (Just to be sure, I have nothing against jQuery or other JavaScript libraries—they can be quite handy for any number of tasks.)

    Copy & paste the code below to embed this comment.
  5. Fantastic work. Well done. Just one note—it is my understanding and experience that Safari does not implement last-child.

    @ “Jacob Boomgaarden”:http://www.alistapart.com/comments/keepelementskidsinlinewithoffspring?page=1#2 : Yes, jQuery could certainly do this. However, many developers don’t want and many projects don’t need the overhead of that type of library. Offspring seems to be about doing one thing and doing it well.

    Copy & paste the code below to embed this comment.
  6. Ben is right about Safari not supporting the last-child selector.

    Copy & paste the code below to embed this comment.
  7. @“Ben Spaulding”:http://www.alistapart.com/comments/keepelementskidsinlinewithoffspring?page=1#5 : Good catch. Indeed, Safari “hasn’t implemented”:http://www.quirksmode.org/css/firstchild.html support for last-child.

    Copy & paste the code below to embed this comment.
  8. On mid-to-large projects, where using a complete library is needed, such a script would be useless.

    And using jQuery for example, would yield much more flexible results, as its CSS selectors are very complete.

    I am, by no means, trying to flame here, but i really don’t see the point of a js library that does trivial things.


    Wouldn’t it be better to simply use pure js to accomplish this?
    I mean, if you only need the first-child of the navigation, its much faster to do:

    var nav-items = document.getElementById(‘nav’).getElementsByTagName(‘li’);
    nav-items0.class = ‘first-child’;

    Copy & paste the code below to embed this comment.
  9. Might be worth having another look at Dean Edwards’ ie7 (and now ie8) script. He’s done some re-writing, and I believe it performs a bit better now.

    Of course, Offspring and ie7/8 solve different problems, albeit with some overlap.

    Copy & paste the code below to embed this comment.
  10. Unfortunately Opera also does not support the CSS 3 selector :last-child so it only works in Mozilla based browers.

    Copy & paste the code below to embed this comment.
  11. sometimes for purely presentation-based pages i import jquery just to get around ie6’s useless CSS implementation and to avoid using CSS hacks – so i commend you for fighting the fight. jquery is probably an overkill if you don’t need help with extra behaviours, so i guess in this case offspring would be useful – but it’s nice to know with jquery that you have extended options such as ajax, events and DOM manipulation, available when and if you need them.

    Copy & paste the code below to embed this comment.
  12. The first-child selector is the only CSS-selector I have really missed for IE6, when creating horizontal menus.

    A simple fix would be to use negative margin-left for IE6 served with the star-html CSS-hack.

    • html ul#primary-navigation li {
        margin-left:-2px;
      }
    Copy & paste the code below to embed this comment.
  13. Here’s a slightly outdated table of CSS 3 selector compatibility I made on CSS3.info a while ago:

    http://www.css3.info/modules/selector-compat/

    This article has reminded me that I need to update it!

    Copy & paste the code below to embed this comment.
  14. What’s up with that huge gap of white space after the first line of the first markup snippet?  That doesn’t look very good.  Time to call the CSS doctor.

    Copy & paste the code below to embed this comment.
  15. I admit I read it in diagonal (I will read better later… ;) but this lib doesn’t support :hover on none a elements correct? That would be a nice addition for drop downs etc… Or did I miss it?

    Thanks!

    Copy & paste the code below to embed this comment.
  16. Great article.

    I was wondering one thing though. How much longer will it be until everyone jumps off this screen-reader bandwagon. There are other platforms that limit displays. Some PDAs and most cellphones for example have poor CSS capabilities.

    Can we be a bit more inclusive? Accessibility isn’t just about blind people.

    Copy & paste the code below to embed this comment.
  17. Opera 9.5 beta has full support for CSS selectors “check it out”:http://www.css3.info/fully-selected/

    Copy & paste the code below to embed this comment.
  18. Sounds like it has got some positives and negatives.

    Copy & paste the code below to embed this comment.
  19. Nicely done, it’s a simple library which performs one task well with minimal overhead.  Where some of the other commenters have suggested incorporating this functionality into larger libraries, I for one value the clean and minimal nature of Offspring; for projects where I need this functionality I can now get it cleanly without a load of other stuff being thrown in as well.

    Copy & paste the code below to embed this comment.
  20. I don’t think people suggest porting to other libraries because they think that Offspring needs speed improvements.  I at least would love to see a Mootools port because I use Mootools for other things, and having the functionality that Offspring provides would be a nice bonus.

    If all you need is CSS pseudo-classes, then clearly Offspring as a small, stream-lined, standalone library is superior.  However, if you’re using a Javascript library for other programming already then integrating Offspring into it makes a lot of sense.

    Copy & paste the code below to embed this comment.
  21. This looks fantastic and something that I’d love to play around with sometime. That said, I can’t imagine using it seriously any time soon. I don’t think the benefits outweigh the headaches that it’ll undoubtedly somehow cause.

    Copy & paste the code below to embed this comment.
  22. In your section about the horizontal navigation you mention, “It just doesn’t work in IE 6.” Isn’t that a deal breaker? When client sites have 30% or more of their audience using IE 6, is it reasonable to create something that doesn’t work for those folks? Then you toss-in the Safari issues – more of a deal breaker?

    Copy & paste the code below to embed this comment.
  23. @Eddie: I don’t think you read the article. The whole point was to make advanced selectors work in IE6, and other browsers. IE6 was a deal breaker (for CSS selectors), now its not. And “The fastest overall browser in the tests was Safari 3.x”, so I’m not sure what Safari issues you are talking about.

    Copy & paste the code below to embed this comment.
  24. In the section of the code in the optimization section, lastChildHashTable1 and lastChildHashTable2 both apply the first-child class. Shouldn’t first-child only be applied for lastChildHashTable0, or am I missing something here?

    Copy & paste the code below to embed this comment.
  25. Alex: Wonderful job on this library. I like the fact that it stands alone without support from any underlying framework. I’m not a framework hater by any means, in fact I have a few favorite frameworks of my own, but it’s nice to see a script that can stand on its own for those projects where a complete framework is overkill.

    I also like how thorough the library is. Those nth-child selectors will come in very handy. Up to this point, I’ve been using PHP on the back-end to add a special alt class to odd elements.

    Once again, well done on this library and keep up the good work. Oh, and try to ignore the nay-sayers…they’re just jealous. ;)

    Copy & paste the code below to embed this comment.
  26. Does anyone know any reason what-so-ever why Microsoft would choose to implement first-child and not last-child for IE7?  I’m perplexed.

    Copy & paste the code below to embed this comment.
  27. This comes at a good time for me. Trying to improve the CSS for the Wordpress backend and very annoyed that they don’t provide enough CSS hoooks in their tables.

    With nth-child support I can get around that problem without having to edit the core templates, and I didn’t want to use a full library such as jQuery to create the same effect due to speed issues. Wordpress’ backend can be pretty slow already.

    Copy & paste the code below to embed this comment.
  28. Great article, and all the comments in the .js file are very helpful too!

    However, something kept bothering me. I’m not a webdeveloper, but I wonder if JavaScript is the language to do this. In my view JavaScript is designed to do behavioural tasks in a browser. XSLT is the language that’s really good at finding the position of an element in the DOM and at creating mark-up.

    So I did an experiment and wrote a small client-side XSLT (60 lines) that renders the same result (I think) as this JavaScript library in full mode.
    It doesn’t run flawless yet in Internet Explorer but I believe this is the way it should be done (in a perfect world :)

    I’ve written about my solution: http://banji.nl/experiments
    I’d be interested to get some feedback and hear about other experiences with client-side XSLT.

    Copy & paste the code below to embed this comment.
  29. A couple of people asked in the comments why Internet Explorer (and Safari) support first-child but not last-child. This is probably because first-child was part of the CSS2.1 recommendation and last is CSS3.

    Copy & paste the code below to embed this comment.
  30. While I appreciate libraries like this, I will only use them in contained environments (where you know people will have javascript. If not, I prefer to find solid css fixed.

    As for the css discussed in this article, I do have a few things to say:

    • using descendant selectors is great, it can be pretty dangerous since the > combinator is not supported in IE6 either. This means that an ul li statement will hit on all li elements. This is annoying when nesting lists.
    • you are right that the pipe symbol does not belong in the html source, but if you’re using a pipe anyway it’s better to
      have it inserted through css (generated content). Again, this is not supported by IE (yet) but it’s really the way to go, as this generated content can be styled to your liking. Much easier than fixing background images over and over again. If you’re really hardcore, you can have it inserted through the css content and use conditional comments for IE. Though that is overkill alright :)
    Copy & paste the code below to embed this comment.
  31. here’s a weird fact:
    IE6 & IE7 implement the CSS3 selector “text-overflow” but Firefox and Safari don’t (haven’t cared to check it in Opera).

    http://www.css3.info/preview/text-overflow/

    Also, this seems like an awful lot of JavaScript for not much benefit you can have clean markup and utilize the selectors without all the extra javaScirpt. I’ll give it a try though.

    my2cents

    Copy & paste the code below to embed this comment.
  32. Of the three forward thinking methods, I like the third one the best, (just use the offspring classes). The reason I like this one is because if I do eventually want to remove offspring I can just do a find/replace on those classes.

    Copy & paste the code below to embed this comment.
  33. I’m currently working as stylesheet guy on Slantly.com – I developed a method for making pipe-separated horizontal lists with no requirement of :first-child (so no IE problem, either) => http://www.dillerdesign.com/css/cookbook/links_pipes_list_elements.html

    Copy & paste the code below to embed this comment.
  34. My motive for leaving my previous comment was that use of :first-child was the first-real world example in the article.

    Copy & paste the code below to embed this comment.
  35. Interesting script, Alex. I’m playing around with it right now on some dev sites at work :)

    I just wanted to let you know that there is a small error in the “Applying Offspring to a specific section of the DOM” section. Where you have “Offspring.init();” and “Offspring.traverseChildren(tableNode);”, those first “O“s should be lowercase.

    It took me a few minutes to figure out why I was getting “Offspring is not defined” errors, but a lowercase “o” sets everything right.

    Copy & paste the code below to embed this comment.
  36. Has anyone done a proper testing of Dean Edwards IE7 beta 3 script and if so, give some feedback.

    I would very much like to use it, however heard a couple of annoying things such as frozen screens and very slow loading times.

    Help would be appreciated. Thanks.

    Copy & paste the code below to embed this comment.
  37. I’m not qualified to speak on the script aspects of the article as I’m only just dipping my toe into javascript but the section of the article that suggests using an image to separate the items of a horizontal list bothers me a little.  I like the reason for using it but if the viewer is using a large font size rather than a screen reader; the list-item markers won’t increase in size as the font increases.  Would it not be an idea, especially as horizontal lists are so useful, to lobby for either a vertical line or for customised markers to be included as a list-item marker.

    Copy & paste the code below to embed this comment.
  38. The only part of offspring that I haven’t liked is the need to use class notation in your stylesheets instead of pseudo-classes, which means when browser support catches up with CSS3 (sometime around the turn of the next century, I’m sure) you’d have to go through and fix all your stylesheets. So I’ve devised a little script that you can run with offspring called pseudonut. It basically lets you use the css3 pseudo-classes in your stylesheet, and it converts them into the class notation for use with offspring. When CSS3-compatible browsers become commonplace, all you’d have to do is drop the scripts and you’re ready to go.

    You can check it out at http://www.cssquirrel.com/2008/03/02/solving-impatience-with-pseudonut/

    Copy & paste the code below to embed this comment.
  39. For me this is perfect – and I’m loading offspring and the class notion styles via a conditional statement in the index file, so there is no extra overhead for any other browser than IE6, and no need to upgrade the CSS later

    Copy & paste the code below to embed this comment.