Разделители между (возможно скрытими) span'ами

Question

[qrazydraqon]

Имеется набор span'ов, образующих перечисление. Пункты разделены запятыми:

<span class="item">Value 1</span><span class="delim">, </span>
<span class="item">Value 2</span><span class="delim">, </span>
<span class="item">Value 3</span>

Когда у всех item стоит display:inline, всё прекрасно. Но иногда надо некоторые значения скрыть (добавить класс с display:none, например). Тут начинаются проблемы, потому что непонятно как скрывать запятые.
Например, при скрытии второго посередине образуются две последовательных запятых, что неправильно. Это легко решается применением соседского селектора, но остаются другие проблемы: что делать, если последний пункт скрыт (перечисление заканчивается запятой) или если скрыт только первый (в некоторых решениях список начинается с запятой).

Какие-нибудь соображения?

PS. Я знаю, что можно легко решить эту задачу на JS, но хочется найти решение на HTML/CSS.

Comments

[Shedal]

А включить запятые вовнутрь item'ов не думали?
И кстати, если это перечисление, то почему span'ы, а не li?

Answer 1

[qrazydraqon]

Решение, как обычно, нашлось там, где его никто не ждал. Надо использовать так называемый general sibling selector:

.item.active ~ .item.active:before {
    content: ', ';
}

В таком случае запятая вставляется только перед теми видимыми пунктами перечисления, до которых у того же родителя встречается другой видимый пункт.

Comments

[Shedal]

Круто! Я не знал о таком. По ссылке, правда, написано, что в IE7 и IE8 работает с багами.

Answer 2

[Shedal]

Разделители можно вставлять средствами CSS: www.mojavelinux.com/blog/archives/2005/01/crossbrowser_list_delimiters/

Comments

[qrazydraqon]

Если первый пункт скрыт, а второй показан, то перед вторым будет запятая. Понятно, что лечится селектором в духе

.item.active + .item:before {
    content: ', '
}

Но тогда ситуация «1 — показан, 2 — скрыт, 3 — показан» ломается (между 1 и 2 нет запятой), потому что .active ни перед одним нет.

[Сергей Протько]

Вы можете на скрытые элементы вешать классы. Или наоборот, на те что видны. И таким образом выйдет более конкретный селектор.

[qrazydraqon]

Ну, если б я знал, как их написать, я б не спрашивал. :)

[Shedal]

Тут проблема, мне кажется, только в том, чтобы определить, какой из элементов первый в списке. Можно реализовать добавление класса first джаваскриптом, а остальное — селектором с оператором +

[qrazydraqon]

Скрыть первые n элементов, остальные показать — та же проблема.
Определять первый видимый с помощью JS, конечно, легче, чем полностью на JS расставлять запятые. Идея хороша ещё и тем, что можно решить вопрос с тем, чтобы перечисление начиналось с заглавной буквы.

[Shedal]

Кстати, а вы всю статью прочли? Там же в конце есть решение с background'ом и обрезанием последнего разделителя при помощи clip.

[qrazydraqon]

В моей ситуации не проходит. Если с position:absolute можно довольно легко справиться, то бэкграунд использовать совсем неудобно — так уж вышло, что я заранее и размер шрифта не знаю.

Answer 3

[Сергей Протько]

А поместить разделитель в span.item никак?

Comments

[qrazydraqon]

Как это решает проблему в случае, когда последний пункт скрыт?

[Сергей Протько]

Ну… Тогда реализуйте как вам предлагалось ниже через before/after. Благо есть ie9.js.

Answer 4

[Сергей Протько]

jsfiddle.net/g3ZXA/ — увы фишка с first-of-type не сработала. Пример со структурой реализованной как у вас уже дали ранее.

Касательно «слишком много JS» — экономите на спичках. К сожалению у меня не вышло при помощи псевдо селекторов nth-of-type или first-of-type реализовать задуманное. Хотя я считаю что это странно. Если вариант с nth-of-type не катит только потому, что отсчет идет по дереву, то firt-of-type почему не работает, мне не ведомо. Если он аналогичен nth-of-type(1) то смысла в нем я не вижу.

Comments

[Сергей Протько]

jsfiddle.net/g3ZXA/2/ — черт… мне действительно пора заканчивать работать сегодня…

Answer 5

[Seldon]

Есть много способов эо сделать. зависит от требуемой кроссбраузерности и общей верстки данного блока. Уточните эти детали

Comments

[qrazydraqon]

Переверстать можно при необходимости почти как угодно. Кроссбраузерность — ну, IE6 вроде не требуется, я бы сказал, начиная с восьмого.

Answer 6

[SerDIDG]

Если пункты скрыты, для чего их рендерить? Пусть сервер строит только те которые нужно. Если пункты динамически отображаются, тогда не вижу проблем, чтобы решить проблему с помощью js. Можно скрывать следующий элемент вместе с item, то бишь скрывать item и его следующий элемент. В джаваскрипте следующий элемент можно получить так: node.nextSibling;

Comments

[qrazydraqon]

С JS-то всё просто, конечно. Но очень не хочется это делать — там и так куча кода, и дописывать под данный конкретный случай функцию для рендера списка видится мне костылём.

[SerDIDG]

Вы сами выбрали путь костыля, вместо того чтобы написать один класс для списков ) А вот такие пляски со стилями будет кроме как костыля ещё повергнут в глубокий ступор того, кто будет это после вас смотреть. Выработал для себя золотое правило, что если нет элегантного простого решения со стилями, значит стоит перенести это в жс. Чтобы через год не ломать голову «для чего тут отрицательные падинги».

[qrazydraqon]

Я в таких случаях всегда пишу подробные комментарии, потом вполне понятно.
А переносить в JS иногда плохо по той же причине — там сейчас его дофига и он не самый простой. Пихать туда ещё что-то не по существу совсем не хочется, а если вынести наружу, то потом непонятно будет, что это вообще такое.

[SerDIDG]

Ну как знаете, оставляю это здесь jsfiddle.net/rqgNH/1/