Неуловимый CSS-селектор для группировки потомков

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

Дилемма стилизации потомков

Рассмотрим следующий пример таблицы:

  ...
  

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

#myTable th, #myTable td {}

Однако этот подход является многословным и утомительным при работе с большим количеством элементов.

Селектор (th, td): упущенная возможность

Более интуитивно понятный вариант синтаксис должен был бы использовать селектор группировки, аналогичный следующему:

#myTable (th, td) {}

К сожалению, такой синтаксис не существует в CSS.

Бесполезность предложений до 2008 года

Как оказалось, отсутствие селектора группировки потомков было давней проблемой. Ранние попытки его внедрения, такие как псевдокласс :any(), предложенный в 2008 году, не получили поддержки.

Последние разработки и проблеск надежды

Однако в рабочем проекте селекторов уровня 4 вновь вводится концепция группирующего псевдокласса :matches(). Хотя это предложение многообещающе, до поддержки браузеров еще далеко.

Альтернативные решения

А пока есть несколько обходных путей для группировки потомков:

• Использование селектора *:

  #myTable tr > * {}

  (Обратите внимание, что это предполагает, что элементы tr содержат только элементы td или th и а не другие элементы)

• Придерживаться многословного подхода th, td для максимальной производительности

Вывод

Отсутствие Селектор группировки потомков в CSS был постоянной проблемой на протяжении многих лет. Хотя недавние предложения вселяют проблеск надежды, широкая поддержка браузеров остается недостижимой. До тех пор разработчикам придется полагаться на альтернативные подходы или смириться с многословием существующего селектора th, td.