Forum Moderators: not2easy
3.6. last-child pseudo selector
The last-child [w3.org] pseudo selector is the opposite of the CSS2.1 first-child pseudo selector and acts exactly the same as the new nth-last-child(1) pseudo selector.
Syntax: E:first-child (CSS2.1)
Syntax: E:last-child
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>list-child psuedo selector test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {
text-align: center;
}
.menu li {
display: inline-block;
padding: 5px;
}
.menu li:first-child a, .menu li:last-child a {
text-decoration: none;
color: white;
}
.menu li:first-child {
background-color: green;
}
.menu li:last-child {
background-color: red;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">last</a></li>
</ul>
</body>
</html>
Support:
IE6 doesn't support first-child either
Graceful fallback:
As always hard to do with selectors
IE8.js adds support for last-child in IE7 and IE6.
No known solution for IE8.
First child support for IE6 can be added with IE7.js
Practical use:
Many uses would be possible, but the lack of IE8 support nor workaround is crippling to getting this in use without a degraded solution.
[edited by: swa66 at 11:08 pm (utc) on June 30, 2009]
