My goal is to apply the CSS on the last li, but it doesn't do that.
#refundReasonMenu #nav li:last-child {
border-bottom: 1px solid #b5b5b5;
}<div id="refundReasonMenu">
<ul id="nav">
<li><a id="abc" href="#">abcde</a></li>
<li><a id="def" href="#">xyz</a></li>
</ul>
</div>How can I select only the last child?
The :last-child pseudoclass still cannot be reliably used across browsers. In particular, Internet Explorer versions < 9, and Safari < 3.2 definitely don't support it, although Internet Explorer 7 and Safari 3.2 do support :first-child, curiously.
Your best bet is to explicitly add a last-child (or similar) class to that item, and apply li.last-child instead.
Another solution that might work for you is to reverse the relationship. So you would set the border for all list items. You would then use first-child to eliminate the border for the first item. The first-child is statically supported in all browsers (meaning it can't be added dynamically through other code, but first-child is a CSS2 selector, whereas last-child was added in the CSS3 specification)
Note: This only works the way you intended if you only have 2 items in the list like your example. Any 3rd item and on will have borders applied to them.
If you think you can use Javascript, then since jQuery support last-child, you can use jQuery's css method and the good thing it will support almost all the browsers
Example Code:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})
You can find more info about here : http://api.jquery.com/css/#css2
If the number of list items is fixed you can use the adjacent selector, e.g. if you only have three <li> elements, you can select the last <li> with:
li+li+li {
color: red;
font-size: 170%;
} <ul>
<li>First</li>
<li>Second</li>
<li>Last</li>
</ul>
If you find yourself frequently wanting CSS3 selectors, you can always use the selectivizr library on your site:
It's a JS script that adds support for almost all of the CSS3 selectors to browsers that wouldn't otherwise support them.
Throw it into your <head> tag with an IE conditional:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
last-child pseudo class does not work in IE
As an alternative to using a class you could use a detailed list, setting the child dt elements to have one style and the child dd elements to have another. Your example would become:
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}
html:
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>
Neither method is better than the other and it is just down to personal preference.
Why not apply the border to the bottom of the UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}
If you are floating the elements you can reverse the order
i.e. float: right; instead of float: left;
And then use this method to select the first-child of a class.
/* 1: Apply style to ALL instances */
#header .some-class {
padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
padding-right: 20px;
}
This is actually applying the class to the LAST instance only because it's now in reversed order.
Here is a working example for you:
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
Another way to do it is using the last-child selector in jQuery and then use the .css() method. Be weary though because some people are still in the stone age using JavaScript disabled browsers.
It's hard to say without seeing the rest of your CSS, but try adding !important in front of the border color, to make it like so:
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}
