Select Second Last Element with CSS

Select second last element with css

In CSS3 you have:

:nth-last-child(2)

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

nth-last-child Browser Support:

• Chrome 2
• Firefox 3.5
• Opera 9.5, 10
• Safari 3.1, 4
• Internet Explorer 9

how to pick 2nd last child by css

you can do:

li:nth-last-child(2) {
   css declarations;
}

nth-last-child counts back from the last child rather than forward from the first.

Note that I took out the 'ul' and 'a' selectors from the css. That didn't match what you had in the html.

Is there a way in css to select second last child?

Under the conditions specified, applying class (or id) to the second last element is only option.

How can I select the element prior to a last child?

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)

How do I choose the last 2 items in a list with css nth-child?

Unfortunately it's impossible.. Disregard this answer and look at spliters answer below.

If it were to be possible, it would look something like...

ul li:last-child+li {...}

But this doesn't work, because + will select the immediate sibling after last-child (which is nothing, of course). There is no immediate previous selector.

There are different ways of achieving this with jQuery, the most performant would be...

var lastItems = $("#list li");
lastItems.slice(lastItems.length - 2).addClass("whatever");

http://jsfiddle.net/qkzdJ/

How to get the second last element by class in jquery?

As mentioned in the prev() docs:

Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

But in your case, targetMe is not the "immediately preceding sibling". There are text and icons in between. Thus we need to use prevAll() instead as it will:

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

Thus it will try to find all "preceding siblings" based on the class, not just the "immediately preceding sibling" and after that, we can use the :first selector to get the first match only and that will be the second last element based on class.

Working Demo:

$('.targetMe').last().prevAll('.targetMe:first').css('background', '#f99')

div { margin: 5px; border: 1px solid #CCC; padding: 4px 8px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="targetMe">A</div>Some Text Here...<div class="targetMe">B</div>Some Text Here...<div class="targetMe">C</div>

li:nth-last-child(2):nth-child(odd) {  color: red;}

<ul>  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li></ul>
<ul>  <li>One</li>  <li>Two</li>  <li>Three</li></ul>

li:nth-last-child(-n+2) {color:red;}

<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>