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; }