The :first-child and :last-child pseudo classes in CSS are super-handy for stying things like lists. For example, if you want a horizontal line between list items, you can set:
ul li {
border-bottom: solid 1px #e0e0e0;
}
ul li:last-child {
border: none;
}
Unfortunately, most current browsers can’t stomach :first-child and :last-child. :(
But just a teaspoon of jQuery will make that pseudo-class medicine go right down:
function firstLast()
{
$('ul li:first-child').addClass('first');
$('ul li:last-child').addClass('last');
}
jQuery(firstLast);
Feb 23rd, 2009 at 7:47 am sonictruth
Wow, thats a great idea. I work with drupal which tends to give me first and last classes on list items, however I often find myself wanting first and last classes on p tags. This will work a treat.
Thanks