Как применить стиль к элементу, в зависимости от количества потомков (Plain CSS)?

Question

[bohdan-shulha]

Собственно, есть простая, словно дерево, менюшка (исходники), в которой используется только CSS. Хотелось бы иметь возможность, всё так же, исключительно средствами CSS, установить определённые стили (пускай это будет цвет фона, для простоты) для пунктов меню, у которых есть дочерние элементы. Возможно ли это?

P.S.: я не волшебник, я только учусь. На менюшку в текущем варианте было убито часов 5 времени.

Answer 1

[stas]

:not() и :only-child

Только придется кое-что немного поменять - перевесить стили на a вместо li и такой фокус возможен:

ul.menu li a:not(:only-child) {...}

В реальном проекте конечно маловероятно что пригодится, я подобные вещи скорее называю задачками на сообразительность / для развития ума / на общее знание селекторов.

В реальных проектах для этого используйте js или css-препроцессоры, или да, помечайте классами

Comments

[Юрий Лобанов]

Да, но стиль-то все равно присваивается дочерним элементам, так ведь? Не важно, какое условие Вы пропишете - a:not(:only-child) - присваивает стиль дочерним элементам - без not - если дочерние элементы единственные, с not - если дочерних элементов больше одного, но в том и другом случае о родителе речь не идет, а задача - как-то разукрасить именно родителя.

[bohdan-shulha]

@iiil я попрбовал в консоли разработчика предложенный вариант и, знаете, вроде бы эта штуковина работает. Очень интересно.

Сейчас только понял, что у меня неправильно задача поставлена, из-за чего возникает недопонимание и путаница: у меня структура меню такова, что сначала идёт ссылка, а за ней - дочернее меню, т.е. они находятся на одном уровне. И, что интересно, до написания поста я ставил задачу себе правильно, только лишь упустив из виду :only-child (в описание не заглядывал тольком, а переводчик в голове это перевёл как "только потомки", а не как "единственный потомок").

Вероятно, неправильная постановка задачи и сбила меня (и, возможно, вас, @iiil ) с толку :(

@stas3572 спасибо за решение.

[Юрий Лобанов]

@bohdan4ik посмотрю дома внимательнее Вашу разметку. В таком случае могут помочь и другие селекторы, если я не ошибаюсь.

[stas]

Не за что) Опишу как я понял задачу и поясню решение:

имеем меню ul.menu > li > a / a + ul. Для него написать на чистом css селектор для выделения пункта меню, имеющего/не имеющего подменю.

Если перевесить с li на дочерний a стили (хотя бы визуальные) то описанный мною выше селектор будет как раз то, что вам надо: «выбираем все a, которые при этом не единственные(:not(:only-child)) в ul.menu li». Визуально вы выделите соответствующий пункт, но не элемент родителя.

Если же вам хотелось знать возможно ли через css путешествовать вверх по дереву - то нет)

Конкретно по селектору по родителю :
web-standards.ru/articles/parent-selector хорошая статья, а так еще посерчите - давно идут споры по поводу реализации этого в будущем, может еще будет)

[stas]

Как то тоже столкнулся с недостатком отсутствия подобного селектора:
надо было в зависимости от дочернего, родителю менять фон, решил за счет :before в дочернем с картинкой и позиционированием.
Ну и да, в sass/scss еще можно подобное делать насколько помню

[bohdan-shulha]

@stas3572
Я вам, пожалуй, ещё один вопрос задам, коли уж вы так всё классно расписываете :)

> В реальных проектах для этого используйте js или
> css-препроцессоры, или да, помечайте классами
В чём заключены подводные камни? Неподдерживающиеся селекторы старыми браузерами или проблема с кроссбраузерностью? Или вариант, о котором я не догадываюсь?

[stas]

Ну... да, кроссбраузерность/поддержка старых браузеров в том числе...

Нагрузка (как основной, не учитывая поддержку), надеюсь вы понимаете, что .has-submenu более быстродественен и менее трудозатратен , нежели ul.menu li a:not(:only-child) (по ссылке выше хорошо описан процесс рендеринга). На крупных проектах конечно в основном это влияет, но всё же

Во-вторых, одна из основных задач/возможностей javascript'а как раз в том и состоит(-яла) чтобы изменять и путешествовать по дереву DOM. Котлеты отдельно, мухи отдельно)

Третье, тоже немаловажное - подстраиваться в таком случае под разметку, (как в приведенном выше примере), меньшая гибкость

Ну и в целом куда проще использовать какой нибудь .parent() или вовсе просто указать один класс/класс-модификатор который будет за это отвечать, и понятней это будет (особенно в командной разработке), нежели например разбираться в css-хитросплетениях

ну вот как-то так)

[bohdan-shulha]

@stas3572 ух, какой я, оказывается, наивный :)
Вон сколько неочевидных для меня проблем есть :)
Спасибо за столь подробные разьяснения :)

Answer 2

[sasha]

ну как вариант приходит в голову что то такое

div.child div div div div {
    font-size:10px;
}
div.child div div div {
    font-size:20px;
}

Comments

[Юрий Лобанов]

это стили непосредственно потомков, а как сделать стиль родителю, у которого есть дочерние элементы.

Answer 3

[Юрий Лобанов]

Идея применять только css конечно хороша. Но по вопросу в голову приходит только использование js. Есть какая-то веская причина не использовать его?

Comments

[bohdan-shulha]

Кроме того, что "я так хочу" (занялся домашним проектиком, надумал подразвить скилл фронтенда) - нет :)

Раз пять перечитал доку на w3.org по CSS3 - ничего подходящего не выявил.
Наверное, придётся таки какой-то класс руками прилепить и всё на этом закончится, так же, как и в крутых фреймворках.

Answer 4

[Lisonok]

В css3 нельзя установить стили для родительского элемента, только js
Расскажите, что вам нужно, может быть и можно)