Numbering a list via CSS, only if there are multiple items.

Question

I have an XML document that I'm trying to style via CSS. A relevant snippet of this XML looks like this:

<senseBlock>
    <prelim>Not numbered</prelim>
    <sense>first item</sense>
    <sense>second item</sense>
    <sense>third item</sense>
</senseBlock>

I need to present the <sense> elements as an ordered list, but only if there is more than one <sense> element in the list. In lists with just one <sense> element, I need it to appear as a normal paragraph without any numbers.

Right now I'm styling my list like this, but I don't know how to hide the numbers when there's only one item:

senseBlock {
    display: block;
    counter-reset: sense;
}

prelim {
    display: block;
}

sense {
    display: list-item;
    list-style: decimal inside;
}

sense:before {
    counter-increment: sense;
}

I thought about using an adjacent selector like sense + sense to detect multiple items, but then that won't style the first element in my list. I've pretty much concluded that this is impossible without modifying the XML, but I figured I'd extend this challenge to the community before I give up.

This only needs to work in the latest version of Safari for iPhone.

Answer 1

Aha! I solved this myself using the CSS3 last-child pseudo-selector. This CSS achieved the desired effect:

senseBlock {
    display: block;
    counter-reset: sense;
}

prelim {
    display: block;
}

sense {
    display: list-item;
    list-style: decimal inside;
}

sense:before {
    counter-increment: sense;
}

prelim + sense:last-child {
    display: block;
}