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

Хитрый 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: пожалуйста, очень важно читайте вопрос. Особенно последнее предложение.
  • Вопрос задан
  • 2832 просмотра
Подписаться 3 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка 3.0
    3 месяца
    Далее
  • OTUS
    HTML/CSS
    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;}

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

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

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
FoodSoul Калининград
от 180 000 до 250 000 ₽