Забавы с комбинаторами CSS

В рамках веб-комикса comiCSS я нарисовал небольшой мультфильм, чтобы объяснить, как работают комбинаторы (и универсальный селектор). Надеюсь, это поможет проиллюстрировать, как работают комбинаторы CSS и на какие элементы они влияют:

Здесь не показан комбинатор потомков, потому что это будет просто пустое место, и было бы странно делать это в виде комикса. Просто пустое место в середине панели 😅.

Немного теории

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

Существует пять комбинаторов CSS:

  • Комбинатор потомков (): указывает, что второй элемент является потомком (на любом уровне) первого. Пример: a b выберет все <b>, которые находятся внутри <a>.
  • Комбинатор Child (>): указывает, что второй элемент является прямым потомком (только первого уровня) первого.Пример: a > b выберет все <b>, которые являются прямыми потомками <a>.
  • Комбинатор смежных сиблингов (+): указывает, что второй элемент следует непосредственно за первым в коде (первый сиблинг).Пример: a + b выберет все <b>, которые непосредственно следуют за <a>.
  • Общий сиблинговый комбинатор (~): утверждает, что второй элемент следует за первым в коде (любой сиблинг, если он находится после первого элемента).Пример: a ~ b выберет все <b>, которые следуют за <a>.
  • Комбинатор колонок (||): указывает, что второй элемент находится в той же колонке, что и первый.

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

Если вы заметили, ответ на комбинатор колонки выделен синим, а не желтым цветом: отвечающие — это другие комбинаторы, так как они находятся в той же колонке! 😉.

Комбинаторы и специфика

Это может показаться немного нелогичным, но комбинаторы CSS не увеличивают специфичность селектора. Это означает, что такие вещи, как a b и a > b имеют одинаковую специфичность (даже если один из них логически более специфичен, чем другой).

Таков порядок вещей, и он, скорее всего, никогда не изменится, как объясняется в этой ветке списка рассылки рабочей группы W3C. Придание значения специфичности комбинаторам:

  • добавить сложности в вычисления специфичности;
  • повлияет на стилистику существующих сайтов.

С первым пунктом можно поспорить. Второй представляет собой более серьезную проблему: если почти 20 лет назад специфичность не была изменена, потому что это повлияло бы на многие существующие сайты, представьте, на сколько большее количество сайтов она может повлиять сейчас.


Если вам нравятся подобные карикатуры, посетите comiCSS: веб-комикс о CSS, написанный на CSS. Или посмотрите код на GitHub (это публично созданный проект).

Оцените статью
Procodings.ru
Добавить комментарий