Ashok Yadav Ashok Yadav - 3 months ago 10
CSS Question

Selecting last child of recursive list structure with CSS

I Want to select last Element of div.container

<ul>
inside last
<li>
with css.
The ul of nested will goes n level so please suggest to me if it possible with jquery also.



ul {
list-style: none;
margin: 0;
padding: 0;
}

<div class="container">
<ul>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>Want to select list with css</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>





view the image that i want to select with css

Answer

You can use some tricks to make it.

If you are looking for last element then you can use of :nth-last-child(n) selector, this matches on every element in the nth child and it doesn't look for type or its parent.

This is achieved as it counts from the last child.

.container ul li:nth-last-child(1)
{
    color: red;
    font-size:22px;
}
.container li li {
    color: green;
    font-size:12px;
}

Look at here: MyFiddel

Comments