CSS selector to match single list elements in a nested list

Question

I have nested list, similar to the one below:

<ol>
    <li>Item 1
        <ol>
            <li>Item 2</li>
            <li>Item 3
                <ol>
                    <li>Item 4
                        <ol>
                            <li>Item 5</li>
                        </ol>
                    </li>
                    <li>Item 6
                        <ol>
                            <li>Item 7</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Items 1, 5 and 7 are all lone <li> elements, i.e. they are the only ones in their level of the hierarchy for that specific parent. I would like to match them and exchange them for bullet elements. (I would also be open to a JavaScript solution, though I would prefer pure CSS, if possible.)

No, I do mean items 1, 5 and 7. Item 2 and item 3 are on the same level with the same parent. Item 1 doesn't have another item on that level, even though it still has a nested list. — Firona
– Firona, Commented Apr 3, 2015 at 11:56

BoltClock · Accepted Answer · 2015-04-03 12:33:58Z

2

I think you can use the :only-child pseudo-class.

See reference: http://www.w3.org/TR/css3-selectors/#only-child-pseudo

The trick requires two CSS rules.

The ol li:only-child rule may cause issues due to inheritance.

Use li:only-child * to cancel any effect from the first rule.

Seems to work okay in this example.

ol li:only-child {
  font-weight: bold;
}
li:only-child * {
  font-weight: normal;
}

<ol>
    <li>Item 1
        <ol>
            <li>Item 2</li>
            <li>Item 3
                <ol>
                    <li>Item 4
                        <ol>
                            <li>Item 5</li>
                        </ol>
                    </li>
                    <li>Item 6
                        <ol>
                            <li>Item 7</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

edited Apr 3, 2015 at 12:33

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered Apr 3, 2015 at 12:06

Marc Audet

47k11 gold badges68 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

Depending on the layout the OP may want to scope down the selectors to ol > li:only-child and li:only-child > ol so as not to block inheritance.

Marc Audet Over a year ago

@BoltClock I like your suggestion, makes for a cleaner set of rules. Please feel free to edit/improve the answer if you have time to add a few words.

stovroz · Accepted Answer · 2015-04-03 12:08:47Z

1

Here's a jquery based selector, if that's any use:

$('li').filter(function() { return $(this).siblings().length == 0 })

https://jsfiddle.net/5ge811g5/

edited Apr 3, 2015 at 12:08

answered Apr 3, 2015 at 11:56

stovroz

7,1052 gold badges52 silver badges61 bronze badges

Collectives™ on Stack Overflow

CSS selector to match single list elements in a nested list

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related