CSS-код :is selector — это удобный псевдоселектор, который упрощает сложные запросы селекторов. Он позволяет группировать несколько селекторов в одну, более читаемую форму, что может помочь уменьшить избыточность и сделать ваш CSS более удобным для обслуживания.

Перед :is селектор, вам нужно будет повторить те же стили для нескольких селекторов, что приведет к длинному и повторяющемуся коду. Например, если вы хотите применить те же стили под main элемент к a и button элементы, вы бы написали:

main a,
main button {
  color: blue;
}

С :is селектор, вы можете сгруппировать селекторы в одну строку:

main :is(a, button) {
  color: blue;
}

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

main :is(a, button):hover {
  color: orange;
}

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

Специфичность

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

main :is(a, button) {
  color: green;
}

main a,
main button {
  color: red;
}

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

См. ручку CSS :is селектор от HONGKIAT (@hkdc) на CodePen.

Но имейте в виду, что если в группе есть более конкретный селектор, то его специфичность :is селектор будет таким же, как этот селектор. Например, в следующем коде…

main :is(a, .btn) {
  color: green;
}

main a,
main button {
  color: red;
}  

…у нас есть селектор класса, .buttonчтобы выбрать элемент кнопки, чтобы специфику :is(a, .btn) селектор такой же, как и .btn селектор, который означает, что цвет и кнопки, и ссылки станет зеленым.

См. ручку CSS :is селектор от HONGKIAT (@hkdc) на CodePen.

Заключение

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

Совместимость с браузером

Автор публикации

602

не в сети

Герасим-Курин

Послушай, Сусанин, не видно ни зги

Комментарии: 0Публикации: 626Регистрация: 02-07-2024

FOLLOW