How to Select The Last-Child of The Last-Child

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>

CSS: last-child of parent

You can use .parent > *:last-child or just .parent > :last-child

An asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect.

.parent > *:last-child {  background-color: red;}

<div class="parent">  <p>First child</p>  <input type="text" placeholder="Second child" />  <div>Third child</div></div>

html/css select last-child of last-child for ul/li

In your actual code, each ul is the last and only child of its parent div.accordionContent. That's why every ul is being matched by your selector.

Since the last div.accordionContent happens to also be the last child of your top-level element, you should be able to do this instead:

#accord_wrapper .accordionContent:last-child ul li:last-child

Select last child when odd, 2 last childs when even

Here is one way...

.wrap div:last-child,.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {    color: red;}

<div class="wrap">    <div>Odd</div>    <div>Even</div>    <div>Odd</div>    <div>Even</div>    <div>Odd</div>    <div>Even</div></div>
<hr>
<div class="wrap">    <div>Odd</div>    <div>Even</div>    <div>Odd</div>    <div>Even</div>    <div>Odd</div></div>

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

How to select the last element within an element regardless of type in CSS?

Use this:

section > *:last-child {
    // your custom css styles
}

Explanation:

This works because when you use:

> it select the immediate children

* this selects all the the elements

nth-child ensures that all the immediate children will be targetted (if you use nth-of-type that is not the case.

Select last child with specific element

It's not possible using CSS only. You need to use JavaScript to do that.

Example: if you want to get LI which has the last .close element, use:

<ul>
    <li><span class="close">1</span></li>
    <li><span class="open">2</span></li>
    <li><span class="close">3</span></li>
    <li><span class="close">4</span></li>
    <li><span class="open">5</span></li>
    <li><span class="close">6</span></li>
    <li><span class="close">7</span></li>
</ul>

<script>
var last_open_li = $('.open').last().parent();
var last_close_li = $('.close').last().parent();

last_open_li.css({background: 'green'});
last_close_li.css({background: 'red'});
</script>

http://jsfiddle.net/yw7f4cfc/1/

Is it possible to select the last n items with nth-child?

This will select the last two iems of a list:

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>

---

Related Topics