Using the last-child selector
CssCss SelectorsCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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.
Solution 2 - Css
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.
Solution 3 - Css
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
Solution 4 - Css
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>
Solution 5 - Css
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]-->
Solution 6 - Css
last-child pseudo class does not work in IE
Solution 7 - Css
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.
Solution 8 - Css
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.
Solution 9 - Css
Why not apply the border to the bottom of the UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}
Solution 10 - Css
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>
Solution 11 - Css
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;
}