Почему вы не можете сгруппировать потомков в селекторе CSS?

Question

Если вы хотите назначить один и тот же стиль группе потомков, почему нет простого способа сделать это с помощью CSS?

Скажем, у вас есть HTML-таблица следующим образом:

<table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  .
  .
  .
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

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

#myTable th, #myTable td {}

Почему нет синтаксиса, подобного следующему?

#myTable (th,td) {}

Answer 1

Почему нет синтаксиса, подобного следующему?

#myTable (th,td) {}

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

Первая реализация появилась в Mozilla, хотя и в конце 2010 года, под видом :-moz-any():

#myTable :-moz-any(th, td) {}

В следующем году, было бы предложено, чтобы WebKit следовал примеру , с :-webkit-any():

#myTable :-webkit-any(th, td) {}

Но если бы вы сейчас попытались использовать оба префикса вместе, то из-за правил синтаксического анализа селектора вам бы пришлось продублировать наборы правил , чтобы ваш код даже дольше и победив предполагаемое назначение псевдокласса:

#myTable :-moz-any(th, td) {}
#myTable :-webkit-any(th, td) {}

Что делает использование префиксных селекторов в общедоступном коде практически бессмысленным. Я не вижу никакого законного использования для них нигде, кроме кода конкретного производителя, что означает, что вы, вероятно, не будете использовать их вместе в одной таблице стилей.

В новом рабочем проекте Селекторов уровня 4 есть предложение для :matches() псевдокласс , которое основано на первоначальном предложении :any(), но может увидеть некоторые улучшения по мере пересмотра проекта:

#myTable :matches(th, td) {}

Конечно, поскольку это новый черновик, не ожидайте поддержки браузера намного позже.

В очень специфическом случае стилизации элементов th и td вы можете использовать * вместо этого, предполагая, что ни один из элементов tr в этой таблице никогда не будет содержать дочерних элементов, кроме элементов ячейки, таких как script или template:

#myTable tr > * {}

Но если вы любитель производительности и ненавидите селектор *, вам придется проделать долгий путь.

Answer 2

Возможно, вы захотите взглянуть на SASS - http://sass -lang.com

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

Например:

#myTable{
    background: #CCC;

    tr{
      border: 1px solid #EEE;
    }

    td{
      background: blue;
    }
}

Answer 3

Вы можете группировать селекторы, используя специфичные для поставщика -moz-any() и -webkit-any().

См. Ссылку MDN и рекомендацию W3C для псевдоатрибута :matches().

Ура!

Answer 4

Если не брать это с W3C, вы можете использовать jQuery для подобных вещей

$('#myTable').find('tr, td');

Конечно, JS не всегда включен, и не стоит полагаться на это. Вам просто нужно будет перечислить все ваши селекторы!