How to Select the Element Prior to a Last Child

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)

select the element before the last using nth child regardless of how many elements you have?

You can use :nth-last-child(2):

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

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

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li></ul>

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.

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 can I select the last element with a specific class, not last child inside of parent?

:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type

http://jsfiddle.net/C23g6/3/

As per @BoltClock's comment, this is only checking for the last article element, not the last element with the class of .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

How can I select all children of an element except the last child?

You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:

:not(:last-child) { /* styles */ }

How can I select the last-child of the last-child?

You can use .block div:last-child div:last-child

.block div:last-child div:last-child{  background-color:yellow;}

<div class="block">  <div>not</div>  <div>not</div>  <div>not</div>  <div>    <div>not</div>    <div>not</div>    <div>this one</div>  </div></div>

---

Related Topics