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
andli
elements like that. The only children aul
can contain areli
elements. The only valid structure for such a list isul > 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 targetsa
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
How to Make Bevel and Embosed Effect to Button in CSS 3 for Web-Kit Based Browsers
Padding Within Inputs Breaks Width 100%
How to Select the Element Prior to a Last Child
Css: Auto Height on Containing Div, 100% Height on Background Div Inside Containing Div
Vertically Aligning CSS :Before and :After Content
How to Use Helvetica Neue Condensed Bold in CSS
How to Remove the Arrow in Dropdown in Bootstrap 4
CSS Transform Causes Flicker in Safari, But Only When the Browser Is >= 2000Px Wide
Perfect 100% Width of Parent Container for a Bootstrap Input
What Are Good Resolution Values to Use with Media Queries
Bootstrap Fullscreen Layout with 100% Height
Styling Twitter's Bootstrap 3.X Buttons
Vue Cli 3 - Use Background Image in Style Tag
Compass: Generate Sprites, Plus Width/Height on Each Images in the Sprite
CSS - CSS3 Pixelate Dot Background
"Position: Fixed" Not Woking When Parent Has the "Transform" CSS Property