Задать вопрос

Хитрый CSS селектор?

Есть HTML наподобие этого:

[DIV CLASS=«SHOW-1»]

[DIV CLASS=«SHOW-1»]1[/DIV]

[DIV CLASS=«SHOW-2»]2[/DIV]

[DIV CLASS=«SHOW-3»]3[/DIV]

[DIV CLASS=«SHOW-4»]4[/DIV]

[/DIV]


Можно ли написать такое CSS2 правило, что бы при данной структуре отображался ТОЛЬКО DIV.SHOW-1, т.е. «1». Если внешнему диву поменять класс на .SHOW-2, то будет показываться только 2. При этом что бы селектор не зависел от количества и имен потомков, а показывал только тот child класс которого совпадает с классом parent'а. При генерации не известно сколько child'ов у него будет.

UPD: пожалуйста, очень важно читайте вопрос. Особенно последнее предложение.
  • Вопрос задан
  • 2830 просмотров
Подписаться 3 Оценить Комментировать
Решения вопроса 1
Извините, это конечно не решает вашу проблему, просто выдалась минутка времени и желание кое-что проверить. Как уже сказал s0rr0w:
Селекторы с динамическими именами противоречат смыслу CSS.
Но создавать правила css через javascript последние браузеры нам разрешают. В результате: jsfiddle.
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
@s0rr0w
Селекторы с динамическими именами противоречат смыслу CSS. Используйте JS или серверную часть
Ответ написан
Комментировать
@whynot
В css2 — точно никак, только JS. Если js всё же можно использовать — могу накидать скрипт (там пара строчек)
Ответ написан
taliban
@taliban
php программист
.show div { display: none }
.show-1 .show-1 { display: inline }
.show-x .show-x { display: inline }

Первому диву два класса: [DIV CLASS=«show SHOW-1»] (первый чтоб спрятать все, второй чтоб показать нужный)

если лень два класса первому давать то так:
.show-1 div { display: none }
.show-1 .show-1 { display: inline }
.show-2 div { display: none }
.show-x .show-x { display: inline }

Это лишь теория, я не проверял =) но должно работать
Ответ написан
Wott
@Wott
А нафига?
Если смотреть в сторону того как делаются вложенные меню то там не надо таких хитровые.. замысловатых конструкций — все делается через вложенность подчиненных блоков и управление через :hover или .active Пояснить?
Ответ написан
@loat
.show-1 {}
.show-1 .show-1 {display:block;}
.show-1 div {display:none;}

.show-2 {}
.show-2 .show-2 {display:block;}
.show-2 div {display:none;}

и дальше в том же духе, если нет возможности поменять класс родителю
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы