CODEWITHSUNDEEP
css
Beth
Beth

Reputation: 41

How to target last of type

I want the last unordered list on the page to not have a bottom border. The problem is, if I do last-of-type or last-child it changes all of the unordered lists because they're the only one in each section. Simplified code:

<div>
<section>
    <ul>
    </ul>
</section>

<section>
    <ul>
    </ul>
</section>

<section>
    <ul>
    </ul>
</section>

I can't just use a class because it's for dynamic content, where the client will be adding/deleting sections. Is there a selector I can use? Here's a pic of what it looks like live: enter image description here

Upvotes: 1

Views: 109

Answers (2)

zer00ne
zer00ne

Reputation: 43910

:last-of-type

div > section:last-of-type > ul { 
  border-bottom: 0 none rgba(0, 0, 0, 0); 
}

:last-child

div > section:last-child > ul { 
  border-bottom: 0 none rgba(0, 0, 0, 0); 
}

Do those CSS pseudo-class work?

Upvotes: 6

Little Santi
Little Santi

Reputation: 8793

According to your page scheme, this will work:

div section:not(:last-child) ul {
    border-bottom: solid 1px;
}

This matches any ul within the not-last section of the document.

Upvotes: 2

Related Questions