В блоге разработчиков Safari опубликована статья о новых CSS-селекторах, поддерживаемых в последних сборках WebKit (в т.ч. в Safari 9). Речь идет о новом функциональном псевдоклассе :matches(), а также расширении функциональных псевдоклассов :not(), :nth-child() и :nth-last-child().

Селектор :matches() позволяет удобно группировать и более компактно записывать похожие селекторы (напр. .syntax-highlighted :matches(.css-tag, .css-keyword) вместо .syntax-highlighted .css-tag, .syntax-highlighted .css-keyword). Селектор :not() теперь тоже может содержать список селекторов (модуль селекторов 3 уровня разрешал ему лишь простой селектор, т.е. один тег, класс, псевдокласс или ID).

Но самая, наверное, долгожданная возможность — выбор по номеру дочерних элементов, отвечающих дополнительному условию (напр. с определенным классом). До сих пор невозможность подсчитать дочерние элементы с определенным классом была одним из самых досадных ограничений CSS. Теперь выбрать, например, только четные элементы с классом .myclass будет элементарно — :nth-child(2n of .myclass).

Принципиально новой особенностью этих селекторов будет динамическая специфичность — специфичность всего селектора будет определяться самым специфичным селектором из списка, совпавшим с данным элементом. Например, специфичность селектора :matches(div, #foo, .bar) для элемента <div id="foo"></div> будет равна (1,0,0), т.е. учитывается лишь совпадение с селектором по ID (более специфичным, чем селектор по тегу).

Экспериментальная реализация предшественника :matches() — :-webkit-any() — признана устаревшей. Она не полностью совместима с новой спецификацией (в частности, неправильно определяет специфичность), поэтому от нее советуют избавляться и переходить на новый синтаксис.

Хотя в данный момент новые селекторы работают только в WebKit-браузерах (причем только в новейших), не стоит рассматривать их как хак для WebKit (чем порой «грешат» даже популярные ресурсы типа browserhacks.com). Мы ведь надеемся, что эти селекторы вот-вот заработают и в других браузерах — а значит, «хак» перестанет быть хаком. А надежное решение должно работать не только в сегодняшних браузерах, но и в завтрашних.

К сожалению, еще одна возможность, которую давно ждали от селекторов 4 уровня — псевдокласс :has() , позволяющий обратиться к родительскому/предыдущему элементу — пока не реализована нигде. Недавно в W3C даже обсуждалось предложение перенести ее в следующую редакцию модуля селекторов (уже 5 уровня). Больше всего шансов, пожалуй, что первой ее реализуют в браузере Microsoft (особенно если мы все за это проголосуем!).

P.S. Это тоже может быть интересно:

• CSS-выражения от контейнера для дизайнеров
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• Голограммы, пленочные засветки и шейдеры на чистом CSS