Last-child doesn't seem to be working
This is the code i have:

HTML:

    <div id="nav">
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>
    </div>

CSS:

    #nav ul li a {
    width:162px;
    background:url('http://i.imgur.com/DmeCv.png') -164px 0px;
    #nav ul li:first-child a {
    	width:164px;
    	background:url('http://i.imgur.com/DmeCv.png');
    	}
    	
    	#nav ul li:last-child a {
    	background:url('http://i.imgur.com/DmeCv.png') -326px 0px;
    	}

So far, so good. This works, and displays the image properly.

    #nav ul li a:hover {
    		background:url('http://i.imgur.com/DmeCv.png') -164px -50px;
    	}
    	
    	#nav ul li:first-child a:hover {
    	background:url('http://i.imgur.com/DmeCv.png') 0px -50px;
    
    	#nav ul li:last-child a:hover {
    	background:url('http://i.imgur.com/DmeCv.png') -326px -50px;
    	}

This doesn't work, however. It displays the mid section hover image, rather than the last-child hover image.

Here is an example:

http://result.dabblet.com/gist/2973127/8bf204a16e7caca43ad129cad141fa4810bf18ce
Last-child doesn't seem to be working
===

This is the code i have:

HTML:

    <div id="nav">
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>
    </div>

CSS:

    #nav ul li a {
    width:162px;
    background:url('http://i.imgur.com/DmeCv.png') -164px 0px;
    #nav ul li:first-child a {
    	width:164px;
    	background:url('http://i.imgur.com/DmeCv.png');
    	}
    	
    	#nav ul li:last-child a {
    	background:url('http://i.imgur.com/DmeCv.png') -326px 0px;
    	}

So far, so good. This works, and displays the image properly.

    #nav ul li a:hover {
    		background:url('http://i.imgur.com/DmeCv.png') -164px -50px;
    	}
    	
    	#nav ul li:first-child a:hover {
    	background:url('http://i.imgur.com/DmeCv.png') 0px -50px;
    
    	#nav ul li:last-child a:hover {
    	background:url('http://i.imgur.com/DmeCv.png') -326px -50px;
    	}

This doesn't work, however. It displays the mid section hover image, rather than the last-child hover image.

Here is an example:

http://result.dabblet.com/gist/2973127/8bf204a16e7caca43ad129cad141fa4810bf18ce