Using jQuery to mimic CSS3's :nth-last-child

patrick — Thu, 25 Jun 2009 03:59:06 +0000

I came across the need for using CSS3′s :nth-last-child pseudo-selector recently. What does this do? Nth-last-child lets you select the nth (2nd, 3rd, 4th, etc) child of some element starting from the last one. For example:

li:nth-last-child(-n+4) would select the last four list items in a list.

To style the 2nd-to-last list item only, this example would work:

li:nth-last-child(-n+2)

The situation I had was there is a list of authors for a site. More than wp_list_authors, it was a custom-generated list of certain users. The list is styled to look like a box with two columns. There are dividers between each author both horizontally and vertically, with the bottom two authors having no bottom divider.

This list:


	
	  
	    John Doe
	
	  
	    Hap Pill
...(snip)...
	
	  
	    John Hancock
	
	  
	    Lorem Ipsum
	
	  
	    Jane Doe

… needs to look like this:

Removing the border on the last list item’s span is easy. Use the :last-child pseudo-selector and the border’s gone.

#authors li.odd:last-child span {
	border-bottom: none;
	}

Removing the border on the 2nd-to-last one should be this easy:

#authors li:nth-last-child(-n+2) span {
	border-bottom: none;
	}

But for now, that only works in Safari 4. (and maybe Opera?) so how to get that effect in Safari 3 and Firefox 3? (I have not gotten this to work in IE7 or 6. Those are coming.) Use jQuery and a three-line script.

Here’s what I cobbled together from digging through the jQuery documentation:

//removes bottom border from next-to-last span in the authors listings
	var $curr = $('#authors li:last');
	$curr = $curr.prev().children('span');
	$curr.css('border-bottom','none');

The script first locates the last list item. Then it looks for the previous element of that type, then drills down to the children elements that are spans. In this case, there’s only one. Lastly, the script applies a CSS rule of no border to the span.

Is it perfect? Almost. I’ll need to figure out how to get IE7 and, unfortunately for this job, IE6 to render the next-to-last item correctly.

CSS Specificity – the basics

patrick — Thu, 30 Apr 2009 06:01:18 +0000

Specificity is one of the most difficult topics to grasp in CSS but it doesn’t have to be. It requires two things:

Basic math. (How to add, really.)
How to tell the difference between an HTML element (a tag), a class, an id, and a pseudo-element

That’s it. Let’s look at an example:

Say you’ve got this in your styles:

ul li { color: black; }
li { color: red; }

What will the color of list items (li) be? Is it red, because it comes last? Is it black because we’ve got two tags in the style? The correct answer is black, but not just because we have two tags in the style. It’s because that style declaration’s specificity is greater.

Here’s the specificity math:
element selectors (HTML tags) = 1
pseudo-element selectors = 1
class selectors = 10 (also psuedo-classes and attributes)
id selectors = 100
inline style = 1000

Looking back at the list items, the style with both the ul tag and the li tag has a specifity value of 2 (1 + 1) while the li by itself has a value of 1.

Let’s look at some of the styles on slash25.com.

p {
	line-height: 1.5em;
	margin-bottom: 1.5em;
	}

Specificity = 1

div.entry div p {
	font-family: "gill sans",helvetica, sans-serif;
	font-weight: 100;
	font-size: 90%;
	letter-spacing: 1px;
	}

Specificity = 13
10 for .entry, 1 for div, 1 for div, 1 for p

What about the link styles?

a {
	color: #00a0ea;
	text-decoration: none;
	border-bottom: 1px dotted #00a0ea;
	}

Specificity = 1

a:hover, a:focus {
	color: #000;
	border-bottom: 1px solid #000;
	}

Specificity = 11 (there are two styles, each with a specificity value of 11)
10 for :hover (or :focus), 1 for a

#subNav li li a:hover,#subNav li li a:focus {
	color: #000;
	border-bottom: none;
	}

Specificity = 113 for each.
100 for #subNav, 10 for :hover (or :focus), 1 for li, 1 for li, 1 for a

Remember these basics and you’ll be able to calculate specificity like a pro. Then, the order in which a style appears in the CSS won’t matter as much because you’ll be able to increase the specificity of a style and have your desired effect come to life.

Are there caveats? Like all things in life, yes. The linked URL in this goes to a wonderful Smashing Magazine article in which they go into great depth. I would recommend if you’re stuck and everything seems to not work, drop us a comment or visit that article and see if you can’t figure it out.

Slash25 Code » css

Using jQuery to mimic CSS3's :nth-last-child

CSS Specificity – the basics