CSS last-child(-1)

css css-selectors
Hedde van der Heide picture Hedde van der Heide · Feb 10, 2012 · Viewed 100.6k times · Source

I am looking for a css selector that lets me select the pre-last child of list.

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

Static method:

ul li:nth-child(5)

Dynamic method:

ul li:last-child(-1)

which of course doesn't validate, also nth-last-child doesn't seem to provide a dynamic way.. I can fallback to javascript but I'm wondering if there is a css way I overlooked

Answer

BoltClock picture BoltClock · Feb 10, 2012

You can use :nth-last-child(); in fact, besides :nth-last-of-type() I don't know what else you could use. I'm not sure what you mean by "dynamic", but if you mean whether the style applies to the new second last child when more children are added to the list, yes it will. Interactive fiddle.

ul li:nth-last-child(2)

Related questions

Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing …

Read More
CSS selector for first element with class

I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule: What is wrong in this selector and how do I correct …

Read More
not:first-child selector

I have a div tag containing several ul tags. I'm able to set CSS properties for the first ul tag only: div ul:first-child { background-color: #900; } However, my following attempts to set CSS properties for each other ul tag except the …

Read More