Сократите свой CSS-код с помощью :where()

Используйте псевдокласс-функцию :where(), когда нужно применить одинаковые стили к нескольким элементам, не беспокоясь о том, что порядок селекторов повлияет на специфичность правил. Это простой способ сделать CSS более предсказуемым и удобным для поддержки.


/* Without :where() */
.container > h1,
.container > .card h1,
.container > .card:last-child {
border: 2px solid red;
padding: 10px;
}

/* With :where() */
.container > :where(h1, .card .h1, .card:last-child) {
border: 2px solid red;
padding: 10px;
}

✍️ Шпаргалка по всем CSS-брейкпоинтам для веб разработчиков

➡️ Для мобильных устройств: до 480 пикселей

➡️ Для очень маленьких устройств: от 481 до 767 пикселей

➡️ Для маленьких планшетов: от 768 до 991 пикселей

➡️ Большие планшеты /ноутбуки: от 992 до 1199 пикселей

➡️ Настольные компьютеры: от 1200 до 1919 пикселей

➡️ Очень большие экраны: от 1920 пикселей и выше