• « Setting Cookies
    CSS and jQuery animation »

    Coloring odd/even rows of lists

    CSS, Javascript June 23, 2009

    There are several methods you can use to create odd/even stripes for lists to make them easier to scan. A List Apart had an article about creating stripes, but being over five years old, it understandably doesn’t cover some newer techniques which are available. Then again, the need to support legacy browsers makes the article more relevant than you would think at first.

    Looking at the A List Apart article, the two methods they recommend are manually tagging odd and even items and using Javascript.
    As well as covering the manual method, I’ll describe a variation of the Javascript option which uses jQuery, and will also discuss CSS3 selectors.

    Also, the ALA article discusses table rows, but I’ll stick with unordered lists for the examples; ordered lists would work the same.
    In addition, I won’t cover bypassing styling, since it seems in most cases CSS can be used to make sure the desired properties take precedence.

    Manual tagging

    If you are generating your content, it’s probably pretty straightforward to manually add odd and even classes to the markup.
    As you can tell, this isn’t actual source; to put this to use you’d need to make the CSS declaration in a stylesheet and the HTML would go into the <body> of the document.


    Source

    #ex1 li.even {
    background-color: #ccf;
}

<ul id="ex1">
    <li class="even">Item 1</li>
    <li class="odd">Item 2</li>
    <li class="even">Item 3</li>
    <li class="odd">Item 4</li>
</ul>



    Result

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    Even though the first item is named Item 1, I’ve assumed the list is zero-based, which is why the first element is labelled even.

    Using jQuery

    jQuery makes this example almost trivial.
    Again, the CSS goes in the stylesheet and the HTML goes into the <body>.
    In addition, the Javascript needs to go into a <script> block, and be sure you load jQuery before that block.


    Source

    #ex2 li.even {
    background-color: #ccf;
}

jQuery (function () {
    jQuery ('#ex2 li:even').addClass ('even');
    jQuery ('#ex2 li:odd').addClass ('odd');
});

<ul id="ex2">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>



    Result

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    jQuery also assumes the list is zero-based, since it deals with arrays.
    Even though the odd class is unused, it’s simple to add and allows you to use that class in the future without needing to change the Javascript.

    If you’re already familiar with jQuery, you’ll notice this example uses jQuery instead of $.
    WordPress loads jQuery before Prototype, so $ will call Prototype instead of jQuery.

    jQuery has many selectors you can use in addition to :even and :odd, but those two are the simplest to use in this example.

    CSS3 selectors

    While CSS3 selectors are still a W3C working draft, Safari and Opera will work with this example, as does Firefox 3.5 (3.0 does not).
    The example becomes:


    Source

    #ex3 li:nth-child(odd) {
    background-color: #ccf;
}

<ul id="ex3">
    <id>Item 1</li>
    <id>Item 2</li>
    <id>Item 3</li>
    <id>Item 4</li>
</ul>



    Result

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    Unlike the first two examples, CSS3’s nth-child selector labels the first child as 1 rather than 0, which is why the selector specifies odd to match the other examples.
    jQuery allows you to use the nth-child selector also, and in that case it follows the CSS3 semantics of 1 being the index of the first item.

    Which to use?

    It shouldn’t be too surprising that choosing method depends on many things, including your target audience, the data complexity, and whether the page is automatically generated.

    While it’s compelling to use the CSS3 selectors, the lack of support is a disadvantage.
    Using jQuery makes things work across more browsers, but doesn’t work if Javascript is disabled.
    Manually adding classes is catches the most cases, but you start to mix content and presentation and unless you are generating the content, it becomes quite a burden to maintain the proper classes when the list grows large or if it’s dynamic.

    My inclination would be to go ahead and add the tags if you’re generating content which doesn’t change once it’s loaded by the browser.
    Even though it does mix content and presentation, I don’t see that as a hard line one must follow, especially if keeping a strict separation decreases the maintainability of the site.

    If you’re going to have dynamic aspects of the site anyway, it seems fine to use the jQuery solution, especially if you’re going to insert and/or remove items from the list or rearrange them.
    Changing list items does require that you reassign class names whenever the list changes, but you can do that by modifying the Javascript slightly and calling it when the list changes: 

    jQuery ('#ex2 li:even').removeClass ('odd').addClass ('even');
jQuery ('#ex2 li:odd').removeClass ('even').addClass ('odd');

    This code will remove the odd class from all even nodes, and then make sure all even nodes have the even class, and likewise for the odd nodes.
    jQuery won’t duplicate class names for elements, so it’s safe to globally add the class.

    If you can live with your odd/even styles not showing up on all browsers (and since Firefox 3.5 is a release candidate, in the future this will essentially mean only IE), using CSS3 selectors can be a good way to go.
    No scripting needs to be done even with dynamic content, and everything is controlled in CSS.

    Note that the current version of Opera seems to have problems using :nth-child with dynamic content.
    Safari 3 also had a problem, but Safari 4 seems to correctly work.
    If you wish to test how your browser behaves with dynamic content and :nth-child you can check the QuirksMode :nth-child test page.

    Posted by fmf @ 3:32pm

  • Leave a Comment

    Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.