CSS numbering only if there are multiple elements

Question

I have an XML document that I am trying to create using CSS. The corresponding fragment of this XML is as follows:

<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 containing only one <sense> element, I need it to appear as a regular paragraph without any numbers.

Right now, I put my list this way, but I don’t know how to hide numbers when there is only one element:

 senseBlock { display: block; counter-reset: sense; } prelim { display: block; } sense { display: list-item; list-style: decimal inside; } sense:before { counter-increment: sense; } 

I was thinking about using an adjacent selector of type sense + sense to detect multiple elements, but then this will not style the first element in my list. I have pretty much concluded that this is not possible without modifying the XML, but I decided that I would extend this issue before the community before giving up.

This is only needed in the latest version of Safari for iPhone.

Answer 1

Yeah! I solved it myself using the last-child CSS3 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; }