CODEWITHSUNDEEP
csscss-selectors
Miral
Miral

Reputation: 6038

Using the last-child selector

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?

Upvotes: 107

Views: 188099

Answers (11)

ccpizza
ccpizza

Reputation: 31686

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>

Upvotes: 19

Ozzy
Ozzy

Reputation: 8312

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>

Upvotes: 0

pork-chop
pork-chop

Reputation: 83

Why not apply the border to the bottom of the UL?

#refundReasonMenu #nav ul
{
    border-bottom: 1px solid #b5b5b5;
}

Upvotes: 0

VoteyDisciple
VoteyDisciple

Reputation: 37803

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.

Upvotes: 171

nzifnab
nzifnab

Reputation: 16092

If you find yourself frequently wanting CSS3 selectors, you can always use the selectivizr library on your site:

http://selectivizr.com/

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]-->

Upvotes: 13

ecollis6
ecollis6

Reputation: 5817

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.

Upvotes: 0

Branden Silva
Branden Silva

Reputation: 1406

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.

Upvotes: 76

Tarik
Tarik

Reputation: 81721

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

Upvotes: 43

lexx
lexx

Reputation: 637

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.

Upvotes: 0

rahul
rahul

Reputation: 187050

last-child pseudo class does not work in IE

CSS Compatibility and Internet Explorer

IE7 CSS Selectors: How they fail

Upvotes: 3

changelog
changelog

Reputation: 4681

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;
}

Upvotes: -2

Related Questions