How to Target the Very Last List Element in CSS

Is it possible to target the very last list element in CSS?

The CSS3 Way (IE9+)

If you know exactly how deep your last item is, you can repeat your calls to :last-child:

li:last-child li:last-child {
color: red;
}

This pseudo-class selector isn't supported in IE prior to version 9, according to http://caniuse.com/#search=last-child. Of course, if you don't know how deep this list item will be, then this method isn't really helpful.

The JavaScript Way

You can target the very last list item via JavaScript as well:

var items = document.getElementById("mylist").getElementsByTagName("li"),
_item = items[ items.length - 1 ];

_item.className == ""
? _item.className = "last"
: _item.className += " last" ;

This is raw JavaScript, which requires no additional frameworks or libraries. If you're using a popular framework like jQuery, this could be even simpler:

$("#mylist li:last").addClass("last");

I wouldn't suggest you use jQuery just for something like this. Raw JavaScript would be far faster, and far less bloat.

The Preprocessor way

Depending on how your navigational menu is constructed, you may be able to use a server-side language to identify the last list-item, and mark it as such. For example, we could perform the following using the DOMDocument class in PHP:

$d = new DOMDocument();
$d->loadHTML( $html );

$a = $d->getElementsByTagName("li");
$l = $a->item( $a->length - 1 );

$c = $l->getAttribute("class");

empty( $c )
? $l->setAttribute("class", "last")
: $l->setAttribute("class", "last $c");

echo $d->saveHTML( $l );

This finds the last list item in the HTML and adds a new class of "last" to it. The benefit to this is that it doesn't require complicated, and often times poorly-supported, CSS3 selectors. Further, it doesn't require the addition of large JavaScript libraries to do trivial things.

Targeting the last list item

You were pretty close..

You have to actually tell it to choose the last li, rather than the last #nav-item - there's only one.

#nav-items li:last-child {
property: "value";
}

jsFiddle demo - it works..

Additionally, you don't want #nav-items li a:last-child {} - note the a.. as that will choose the last a - not the last li. In context there are no a elements beside each other anyways.

How to target last row in a list with CSS?

You could do this - with a combination of :nth-child() and general sibling ~ selectors.

http://jsfiddle.net/twu14gu0/

ul {    list-style: none;    padding: 0;    margin: 0;    width: 90px;    height: 90px;    font-size: 0;}li {    display: inline-block;    height: 10px;    width: 10px;    font-size: 16px;}li:nth-child(9n) {    color: red;}li:nth-child(9n+1):nth-last-child(-n+9),li:nth-child(9n+1):nth-last-child(-n+9) ~ li {    color: blue;}
<ul><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li></ul>

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/

CSS: :last-child on list item

That's not possible yet.

  • :last-child selects the last child, regardless of the tag name, etc.
  • The possible alternative, :last-of-type selects the last occurrence of a tag. It ignores the class name, etc.

Your only option is to add a specific class name to that element, or use JavaScript to add this class name.

How to target the last anchor element covering a list item inside and unordered list

Two problems here:

  • You can't swap the positions of your a and li elements like that. The only children a ul can contain are li elements. The only valid structure for such a list is ul > li > a.

  • Validity aside, the reason your rules no longer match is because your first rule is still targeting li elements, but your second rule targets a elements. They're targeting different elements, so no overriding is taking place.

You can make the clickable area bigger without altering your HTML by moving some of the CSS properties such as padding to the a elements, as well as making them blocks:

section.social-section ul li {    width: 22%;    display: block;    float: left;    border: 1px solid #e2e0e0;    margin-right: 30px;}
section.social-section ul.group li:nth-child(4) { margin-right: 0;}
section.social-section ul li a { display: block; padding: 10px;}
<!-- Social section --><section class="social-section">    <ul class="group">        <li><a href="#">facebook</a>        <li><a href="#">twitter</a>        <li><a href="#">pinterest</a>        <li><a href="#">google+</a>    </ul></section>

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.

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>

How to target the last element in a container with CSS while taking in account his order property?

You can't do that in CSS, Add the padding to the container itself if it's just a padding.

.parent-container {
display: flex;
padding-bottom: 26px;
h1 {
order: 1;
}
h2 {
order: 0;
}
}


Related Topics



Leave a reply



Submit