Что нового в CSS селекторах 4-го уровня?

[@tamtakoe]

Тухловато… Но пусть делают, посмотрим, что выйдет.

[@torbasow]

К моему возмущению, в прошлом году выкинули idref combinator. В результате как отсутствует напрашивающаяся возможность стилизовать label, относящийся к input[type=«check»], в зависимости от состояния последнего, так её и не предвидится.

[@bolk]

«:has» — очень интересный селектор. Долгожданная реализация «parent-селектора», о необходимости которого было столько дискуссий. Далеко не худшим способом реализовали, надо сказать, другие варианты были тухлее.

[@georgthegreat]

Только вот неспроста говорят, что медленно.
До этого все селекторы были регулярным языком; добавление этого селектора эту регулярность ломает.

[@saggid]

Большое спасибо за ссылку. Я пару секунд не мог понять, что ещё за уровни, а потом решил забить на это при переводе и назвать их версиями. Чуть позже исправлю статью.

[@Jabher]

Не, не впечатлили.
Куча вещей, которые можно сделать препроцессорами, пара сомнительных мелких нововведений и :has, который, конечно, всем хотелось (да и мне тоже), но который стооолько геммороя принесет. И с быстродействием, и с починкой кривой верстки.

[@fetis26]

Нормальный родительский селектор решили не делать значит

[@torbasow]

А в чём разница?

[@fetis26]

На мой взгляд это тот, который первым приходит в голову при словосочетании «родительский селектор» и работает от элемента, например a ^ div. С производительностью не было никаких проблем.

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

[@StreetStrider]

Не думаю, что по скорости это отличается от :has, по сути — это две формы указания того, что применять селектор надо не к конечному элементу, а к элементу, который находится в середине.

[@fetis26]

В случае с прямым селектором нам надо просто подняться на Х уровней вверх.
В случае с :has нужно проанализировать поддерево, которое может быть достаточно большим.

[@torbasow]

Так а чем это отличается от div:has(a), кроме формы написания?

[@Keyten]

<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>

Как понимаю, это аналог такого?

<table>
  <col span="2"></col>
  <col class="selected"></col>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td colspan="2">D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>F</td>
    <td colspan="2">G</td>
  </tr>
</table>

Я имею в виду отсутствие закрывающих тегов.

[@bolk]

Закрывающий не обязателен в некоторых случаях: www.w3.org/TR/html/tabular-data.html#the-td-element

[@Keyten]

Да, помню это ещё с книг по html 4, но всё же очень давно не сталкивался.

[@saggid]

Кстати, в таком стиле (без закрывающих тэгов), если я не путаю, уже давно можно писать код) хотя я до сих пор не заимел такой привычки. Я сейчас проверил, да, браузер нормально воспринимает подобные махинации) Интересно, есть где-нибудь статья на эту тему?

[@Finom]

Интересно, а прокатит ли что-то типа этого в JS?

node.querySelectorAll('.parent:has(::scope)');

Вместо небогоугодного, но безальтернативного (кроме кучи кода)

jQuery(node).parents('.parent');

[@Finom]

Киньте ссылочку, пожалуйста, гугл не помог.

[@Finom]

Я бы оценил ваш юмор по достоинству, если бы было очевидно, что вы имеете в виду в предыдущем комметарии. Вы, наверно, поспешили ответить мне, не прочтя моего комментария. Цитирую: «Гугл не помог».

[@juryev]

Вот что мне не понятно, так это то, почему до сих пор блуждание по тегам невозможно унифицировать на единой платформе?! Есть XPath, jQuery, нативные JS getElementById, выбор элементов в CSS, добавим ещё всякие библиотечные решения да ещё основу — регулярные выражения. При этом, в сущности, ищут все по одному и тому же дереву документа, но каждый норовит изобрести что-то своё. Понятно, что CCSникам сложно, наверное, оперировать XPath, но этот зоопарк — ещё больше запутывает ситуацию. Уж лучше избрать какую-то, пусть сложную, но единую основу поиска по дереву документа.

[@bor1s]

В старенькой статье тоже неплохо описаны плюшки: habrahabr.ru/post/167333/
Тест css4 селекторов в браузере: css4-selectors.com/browser-selector-test/