CSS-селектор - элемент с заданным дочерним элементом

Ответ 1

Можно ли выбрать элемент, если он содержит определенный дочерний элемент?

К сожалению, пока нет.

CSS2 и CSS3 селектор спецификации не позволяют выбрать какой-либо родительский выбор.

Заметка об изменениях спецификации

Это отговорка о точности этого сообщения с этого момента. Родительские селектора в CSS обсуждались уже много лет. Поскольку консенсуса не было найдено, изменения продолжают происходить. Я попытаюсь сохранить этот ответ в актуальном состоянии, однако имейте в виду, что могут быть неточности из-за изменений в спецификациях.

Более старый "Селекторный уровень 4 Рабочий проект" описал функцию, которая была способностью указать "subject" селектора. Эта функция была удалена и не будет доступна для реализаций CSS.

Объект должен был быть элементом цепочки селекторов, который бы применял к нему стили.

<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>

Этот селектор будет стилизовать элемент span

p span {
    color: red;
}

Этот селектор будет стилизовать элемент p

!p span {
    color: red;
}

В более поздней версии "Редактор Editors Level 4 Editors Draft" включает "Relational Pseudo-class: :has()"

:has() позволит автору выбрать элемент на основе его содержимого. Я понимаю, что было выбрано обеспечение совместимости с jQuery custom :has() псевдо-селектор *.

В любом случае, продолжая пример сверху, для выбора элемента p, который содержит span, можно использовать:

p:has(span) {
    color: red;
}

_{* Это заставляет меня задаться вопросом, внедрил ли jQuery селекторные темы, остались ли темы в спецификации.}

Ответ 2

Для полноты я хотел указать, что в спецификации Selectors 4 (в настоящее время в предложении) это станет возможным. В частности, мы получим Селектор объектов, который будет использоваться в следующем формате:

!div > span { /* style here */

! перед селектором div указывает, что это элемент, который нужно стилизовать, а не span. К сожалению, никакие современные браузеры (на момент публикации) не реализовали это как часть поддержки CSS. Тем не менее, существует поддержка через библиотеку JavaScript под названием Sel, если вы хотите продолжить путь дальнейшего исследования.

Ответ 3

Я согласен, что это вообще невозможно.

Единственное, что может сделать CSS3 (что помогло в моем случае) - выбрать элементы, у которых нет детей:

table td:empty
{
   background-color: white;
}

Или иметь детей (включая текст):

table td:not(:empty)
{
   background-color: white;
}