0

I have this HTML structure:

<ul class="info">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ul class="info">
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<ul class="other">
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

In CSS I want to select the last ul with class info. I've already tried :last-child, :last-of-type. I've also seen a suggestion to add a class on the ul I like to select. However, isn't there a more 'cleaner' way to handle this issue?

j08691
  • 204,283
  • 31
  • 260
  • 272
user2381011
  • 351
  • 6
  • 21
  • You say you've tried :last-child and :last-of-type, but didn't specify how or what the outcome was. Are they not "clean" enough for you? Did they not work? – John Clifford Jan 14 '16 at 16:11
  • 1
    They did both not work, however I was expecting it to work. Adding an extra class in HTML only for making a CSS selection is not the proper way to handle this (in my opinion). Css should be able to make this selection on it's own. – user2381011 Jan 14 '16 at 16:17
  • So ul[class]:last-of-type doesn't work for you? – John Clifford Jan 14 '16 at 16:19
  • No, unfortunately ul[class~='info']:last-of-type{} did not work. – user2381011 Jan 14 '16 at 16:51

1 Answers1

1

I don't think you can use :last-child with a class. It literally looks for the last-child of its tier. Perhaps you can use the :nth-child() instead to help you make your selection.

jshotz
  • 49
  • 2
  • 9
  • This method works. However it's not the most flexible way it does not force me to add an extra class. Thanks for your answer! – user2381011 Jan 14 '16 at 16:52