How to select every last item per section except the last section?

Question

Given the following DOM:

<ul>
    <li><a class="section_0">section_1 item_1</a></li>
    <li><a class="section_0">section_1 item_2</a></li>
    <li><a class="section_1">section_2 item_1</a></li>
    <li><a class="section_1">section_2 item_2</a></li>
    <li><a class="section_2">section_3 item_1</a></li>
    <li><a class="section_2">section_3 item_2</a></li>
</ul>

How do I select every last item per section, starting with the string "section_", with exception of the last section?
I don't want to change the DOM structure because it defines the submenu tree.

The goal is to draw a line below each section.

Edit: alternatively I could add a specific class to the last element per section, but I would prefer not to.

Correction: `li:last-child > a` selects the last item per section. — paulvs, May 01 '16 at 22:15
You MUST define the class in the header section or as an imported file before you can call the class by name. I assumed you had already done that. — , May 01 '16 at 22:20
there doesn't seem to be a pure CSS implementation of what you want without having to as you suggest add a class to the last item of each section. At least not until [CSS selectors level 4](https://www.w3.org/TR/selectors4/#selected-child-index) is implemented. See the comments in [this post](http://stackoverflow.com/a/7298062/5812121). — timolawl, May 01 '16 at 22:29

score 0 · Accepted Answer · edited May 23 '17 at 11:52

0

with pure css, not that I'm aware of. there's no structural difference in the markup to select, and the class names would allow this sort of access only if you could iterate them directly in css somehow - which sounds like javascript to me.

Apparently they thought about a contains() selector for css3 but it does not exist. check Is there a CSS selector for elements containing certain text? question for reference.

I think the best solution is what you suggested, adding a class name to the last of each section, making it more readable and easily selected with css.

edited May 23 '17 at 11:52

Community

1
1

answered May 01 '16 at 22:19

Scott Weaver

7,192
2
31
43

Thanks for the reference, I solved it in the alternative way. – html_programmer May 01 '16 at 22:49

paulvs · Answer 2 · 2016-05-01T22:33:55.497

0

Defining layout by class names is definitely a bad idea, if you can help it, change the layout.

By far the best approach is to make one ul per section and do:

ul:not(:last-child)>li:last-child { color: red; }

Use this markup:

<ul>
    <li><a class="section_0">section_1 item_1</a></li>
    <li><a class="section_0">section_1 item_2</a></li>
</ul>
<ul>
    <li><a class="section_1">section_2 item_1</a></li>
    <li><a class="section_1">section_2 item_2</a></li>
</ul>
<ul>
    <li><a class="section_2">section_3 item_1</a></li>
    <li><a class="section_2">section_3 item_2</a></li>
</ul>

RESULT

edited May 01 '16 at 22:33

answered May 01 '16 at 22:27

paulvs

11,963
3
41
66

I don't want to change the DOM structure for styling requirements for my use case. – html_programmer May 01 '16 at 22:33

score 0 · Answer 3 · answered May 01 '16 at 23:06

You could try li:not( :last-child) > a[class^="section_"]. That should select all a with a class beginning in "section_" regardless of the number, but not in the last li. If you need to style the li containing a section link, you need to move the class to the li tag, as CSS selectors cannot currently specify a "parent" tag.

score 0 · Answer 4 · answered May 15 '16 at 04:26

Given your example, I assume the number of items is static and same for all sections, then you can use this CSS selector.

document.querySelectorAll('li:nth-child(2n):not(:last-child)')

2n means every second
:not(:last-child) excludes last element in your list

How to select every last item per section except the last section?

4 Answers4