CODEWITHSUNDEEP
css
Jay Query
Jay Query

Reputation: 85

How to get only the last ul of specific id on page via CSS :last-child property?

My page generates two ULs of the same ID and I would like to remove the last one via CSS (display: none). I was trying with :last-child property but no luck at all. I either made both of them disappear or none of them.

Example:

<div id="content">

<ul id="some-ul">
<li>...</li>
<li>...</li>
</ul>

<ul id="some-ul">
<li>...</li>
<li>...</li>
</ul>

</div>

I would like to apply display: none only for the last ul#some-ul inside my #content.

Upvotes: 0

Views: 131

Answers (2)

Matthew Trow
Matthew Trow

Reputation: 2842

Completely generic way to do this, that relies on no classes or ID's

div ul:last-of-type li:last-child {
    display:none;
}

So basically, the div is the parent item that contains the list items - it could have a class or ID if you want.

Within that, you have your ul tags - the last-of-type does the magic, finding the last ul within the parent div. You then simply use last child on the li.

Here's the fiddle: http://jsfiddle.net/Kx8SN/

Upvotes: 0

dsgriffin
dsgriffin

Reputation: 68606

It could be done like so:

#content ul:last-child {
   display:none;
}

Note that last-child is only supported in IE9+. As mentioned by @Jop, you should set a class on the last child element to get around this for older versions of IE.

jsFiddle here.

Also, remember that ID's should always be unique.

Upvotes: 3

Related Questions