dr.Brain

doctor Brain

мир глазами веб-разработчика

Для чего нужен is

повторяющиеся селекторы в CSS

dr.Brain

время чтения 2 мин.

Photo by chuttersnap on Unsplash

Довольно часто мы имеем дело с повторяющимися селекторами, имеющими общих родителей. Возможно, это как раз то место, в котором пригодится псевдоселектор :is().

Например, такой код:

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
    font-size: 20px;
}

можно заменить на:

:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
    font-size: 20px;
}

Псевдоселектор is принимает в качестве аргументов список селекторов, записывая зависимости, содержащие большое количество селекторов, в более удобном и компактном виде.

Пример на сайте MDN имеет более фундаментальный вид:

ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
    list-style-type: square;
}

А теперь с :is():

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
    list-style-type: square;
}

Мы видим, что код стал компактным и понятным.

А вот пример в паре с :note():

:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 400;
}

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

Однако, можно с уверенностью сделать прогноз, что скорое повсеместное использование псевдоселектора :is() не за горами.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.