Нумерация списка с помощью CSS, только если есть несколько элементов - PullRequest
4 голосов
/ 05 ноября 2008

У меня есть XML-документ, который я пытаюсь стилизовать с помощью CSS. Соответствующий фрагмент этого XML выглядит следующим образом:

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

Мне нужно представить элементы <sense> в виде упорядоченного списка, но только если в списке более одного элемента <sense>. В списках, содержащих только один элемент <sense>, он должен отображаться как обычный абзац без цифр.

Сейчас я оформляю свой список следующим образом, но я не знаю, как скрыть числа, когда есть только один элемент:

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

prelim {
    display: block;
}

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

sense:before {
    counter-increment: sense;
}

Я думал об использовании соседнего селектора, например sense + sense, для обнаружения нескольких элементов, но тогда это не будет стилизовать первый элемент в моем списке. Я пришел к выводу, что это невозможно без изменения XML, но я решил, что перед тем, как сдаться, передам этот вызов сообществу.

Это должно работать только в последней версии Safari для iPhone.

1 Ответ

6 голосов
/ 05 ноября 2008

Aha! Я решил это сам, используя псевдо-селектор CSS3 last-child. Этот CSS достиг желаемого эффекта:

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...