Я не могу сосчитать, сколько раз я проклинал CSS за отсутствие псевдо-селектора: parent: img: parent {background: none; }
То, что следовало, было некоторым возвращением вперед и назад с людьми, которые продумали это должным образом до конца.
: имеет селектор
Первоначально я чувствовал, что псевдо-селектор: parent сделает свое дело , но Стюарт отметил, что синтаксис селекторов не работает таким образом, он всегда слева направо определяет глубину.
Поэтому, подумав немного об этом, я почувствовал, что использование селектора: has () очень хорошо дополнит селектор: not (). Что-то вроде этого:
a:has(img) { background: none; }
За исключением того, что это совершенно не так.
Е: нет (ы) селектор применяется к конкретному элементу , к которому она применяется. Где, поскольку E: has (s) применяет то, что содержит элемент E — поэтому он требует от браузера гораздо больше.
Джонатан Снук (Jonathan Snook) помог пролить много света на эту довольно серьезную проблему с производительностью, и в эти выходные последовал подробный пост о потенциальных проблемах с производительностью с помощью селектора: has () . Но я не думаю, что книга об этом достаточно закрыта, но я согласен с тем, что селектор:: has () будет стоить почти настолько дорого на движке рендеринга, что не будет иметь смысла внедрять.
Так что, возможно, вернемся к: родительский селектор.
: родительский селектор
У Джонатана есть действительно полезный пример того, как работает селектор: last-child и как он применяется в реальном времени в браузере (см. Раздел «Как браузеры на самом деле справляются с этим»). Мы видим, что браузеры ищут закрывающий элемент. Дочерний элемент, независимо от его положения, всегда имеет parentNode (я сейчас говорю о DOM).
Опять же, Джонатан отмечает, что браузер обрабатывает разметку, которая идет по проводам, как поток (это особенно ясно видно в демонстрации паузы рендеринга), и селекторы CSS применяются к этому потоку, когда элементы встроены в DOM.
Проблема с E: has (s) заключается в том, что как только элемент E найден в DOM, каждый новый элемент, отображаемый в DOM, потребует оценки выполнения селектора: has. Итог: плохая идея.
Разница между E: has (s) и E: parent заключается в том, что: parent является ссылкой на parentNode, который является одним конкретным элементом. Когда элемент E найден в DOM, он просто ссылается на своего родителя и применяет стиль.
Это будет выглядеть так:
a img:parent { background: none; }
С точки зрения производительности, я не вижу, чем это отличается от обычного селектора, за исключением того, что как только он сопоставлен, ему нужен parentNode — опять же, что-то, что доступно сразу же при визуализации элемента E.
Что касается синтаксиса, да, это отклонение от любого другого стиля синтаксиса, но это не является достаточной причиной, чтобы не включать его. В воскресенье я услышал несколько слухов, и это было бы бесценным дополнением к родным селекторам CSS.
Как мы получаем это в браузерах?
На самом деле, я понятия не имею. Возможно, вы читаете и знаете кого-то из рабочей группы CSS. Может быть, вы знаете друга друга. Иди встряхни их и укажи на эту статью.
Может быть, это действительно плохая идея по причинам, которые я не заметил: скажите мне, объясните в комментариях.
Нужен ли нам: родительский селектор? Я думаю, что мы делаем, и я хотел это в течение очень долгого времени.