Ninedays Blog

At work when a designer creates web site design it then goes to one of out front end coders to be transformed from and image to HTML, images and CSS. Then it comes to me. I split up the files, including modules, adding tables to the database and having it spit out arrays for each menu and list.

That's where we get to one of my biggest pet peeves. I hate having to add the classes first and last to some of my lists. I know there is no other way to do it but I just adds to the back end work, processing that maybe doesn't need to be handled on the back end. Then I thought, maybe I can have JavaScript apply last to the last <li> of one of my unordered lists. So we gave it a shot!

Apply a Style to the First and Last Item in a List

Make the first item bold | Make the last item bold

The most common application of this idea wouldn't involve clicking a link to make the first and last stylized, it would usually happen onload.
If we wanted to apply the classes first and last to a list onload we could do just nest that ul within an element with the id featurebox-1 and add this code anywhere in your document.

Code for Applying First ane Last Classes

JavaScript

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        $('featurebox1').down('li').addClassName('first');
        $('featurebox1').down('ul').immediateDescendants().last().addClassName('last');
    });
</script>

HTML

<div id="featurebox1">
    <ul>
        <li>First is the worst</li>
        <li>Second is the best</li>
        <li>Third is the one in the polka dot dress</li>
        <li>Fourth is the&hellip;<em>what do you mean it doesn't go up to four?</em></li>
    </ul>
</div>

CSS

<style type="text/css">
    #featurebox1 ul li.first { font-weight:bold; color:#996633;}
    #featurebox1 ul li.last { font-weight:bold; color:#339933;}
</style>

Updated Version: Apply to First and Last in Nav

Let's say you have the id nav applied to the ul itself, you'd just have to modify that snippit like. We should probably, just to be proper, use the same logic to determine the first list item as we do for the last one.

The old code above found the first list item (<li>) by locating the first <li> tag rather than the first decendant of the <ul> tag. The following will gather an array of decendants immediate to the <ul> with a class of nav. This is more consistent and involves similar trains of thought which is easier to work with in the future when you've forgotten what this complex script was doing.

Updated Code for Applying First ane Last Classes

JavaScript

<script type="text/javascript">
Event.observe(window, 'load', function() {
    $('nav').immediateDescendants().first().addClassName('first');
    $('nav').immediateDescendants().last().addClassName('last');
});
</script>

HTML

<ul id="nav">
    <li>First is the worst</li>
    <li>Second is the best</li>
    <li>Third is the one in the polka dot dress</li>
    <li>Fourth is the&hellip;<em>what do you mean it doesn't go up to four?</em></li>
</ul>

Now to actively use that cleaned up version of Example 1 I'll apply it, with a twist. After realizing how easy it was to apply styles to first and last items I thought, wait...shouldn't there also be a way to mark something as active? That would be great! The best is if I can add a style if the li has a rel of active. That would make things easier for me and we all know how I would feel about that.

Continue on to page 2: Assign a style to your rel="active" content

Popularity: 29% [?]