2008-11-04 4 views
4

J'ai un document XML que j'essaye de styliser via CSS. Un extrait pertinent de ce XML ressemble à ceci:Numéroter une liste via CSS, uniquement s'il y a plusieurs éléments

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

J'ai besoin de présenter les éléments <sense> comme une liste ordonnée, mais seulement s'il y a plus d'un élément <sense> dans la liste. Dans les listes avec un seul élément <sense>, j'ai besoin qu'il apparaisse comme un paragraphe normal sans aucun nombre.

En ce moment je styling ma liste comme ça, mais je ne sais pas comment cacher les chiffres quand il n'y a qu'un seul élément:

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

prelim { 
    display: block; 
} 

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

sense:before { 
    counter-increment: sense; 
} 

Je pensais à l'aide d'un sélecteur adjacent comme sense + sense pour détecter plusieurs éléments, mais cela ne formera pas le premier élément de ma liste. J'ai à peu près conclu que c'est impossible sans modifier le XML, mais j'ai pensé que j'allais étendre ce défi à la communauté avant d'abandonner.

Cela ne doit fonctionner que dans la dernière version de Safari pour iPhone.

Répondre

6

Aha! J'ai résolu cela moi-même en utilisant le pseudo-sélecteur CSS3 dernier enfant. Ce CSS a obtenu l'effet désiré:

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