Css3 Get Last Element

CSS3 get last element

Your question isn't quite clear; there are several ways to get the last .hr element from your example, but you say "DOM structure could be more complicated." In order to answer your question, you need to mention what possible DOM structures you could have; in some it might be possible, in some it will not be.

Here is one way to get the .hr out of the last div:

div div:last-of-type .hr

Here's another way to get the .hr out of the last child of the outer div:

div :last-child .hr

If you need to get the last .hr element out of the document, regardless of what it's inside, then you can't do that in CSS. In CSS, you can only select the first, last, or nth element at one particular level of the hierarchy, you can't select the last element of some type regardless of what it's nested in.

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.

CSS: Last element on line

Interesting question! Here's what I consider a "low-tech" solution with jQuery that does the trick:

$(function() {
    var lastElement = false;
    $("ul > li").each(function() {
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            lastElement.addClass("nobullet");
        }
        lastElement = $(this);
    }).last().addClass("nobullet");
});​

The algorithm is not hard to follow, but here's the idea: iterate over the elements, taking advantage that they all have the same properties (size, margin, display inline etc) that affect their position when the browser computes layout. Compare the vertical offset of each item with that of the previous one; if they differ, the previous one must have been at the end of the line so mark it for special treatment. Finally, mark the very last item in the set for special treatment as well, since by definition it is the last item in the line on which it appears.

IMHO the fact that this is a Javascript-based solution (can it be done without, I wonder?) is no problem at all here, as even if the script does not run there is only going to be an extremely slight visual degradation of your webpage.

See it in action.

Is is possible to target last element inside a class div? CSS

yes with last-child and .header p:last-child will target the last child if it's <p> </p> element and if you want to target the last element in a div that have a .header as a class.

you can use .header *:last-child as mention in the comments section by @Chris G

.header *:last-child {  color: red;}

<div class="header">  <h1>I am numbe one</h1>  <h3>number two</h3>  <p>something</p>  <p>something</p>  <button>last one - red</button></div>
<div class="header">  <h1>I am numbe one</h1>  <h3>number two</h3>  <p>last one - red</p></div>
<div class="header">  <p>number 1</p>  <h1>something</h1>  <h3>last one - red</h3>  <p>ddd</p></div>

body > *:last-child > span:last-child{
    color: red;
}

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

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