Tristanisginger Tristanisginger - 6 months ago 24
CSS Question

HTML CSS how do I underline every li in a nested list

Based on w3c the correct way in HTML for a nested list is.

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>


However I want a border at the bottom of each item in the list, the following code underlines them all but Tea.

li {
border-bottom: 1px solid purple;
}


Any suggestions?

Answer

There are different ways to solve it, I went with this.

li {
    border-bottom: 1px solid purple;
}

li > ul > li:first-child {
    border-top: 1px solid purple;
}

li > ul > li:last-child {
    border: none;
}