Как работает CSS-псевдокласс :matches()

Development | Amber | Комментировать запись

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

Посмотрим на этот код: 

:matches(article, div.section, section) h2 {
  font-size: 3em;
}

/* что равно: */
article h2, div.section h2, section h2 {
  font-size: 3em;
}

Вот еще один наглядный пример: 

:matches(.main, p, div.my-stuff) :matches(h1, h2, h3, h4) {
  border: 2px dotted rgba(255,134,34,0.5);
}

/* что равно: */
.main h1,
.main h2,
.main h3,
.main h4,
p h1,
p h2,
p h3,
p h4,
div.my-stuff h1,
div.my-stuff h2,
div.my-stuff h3,
div.my-stuff h4 {
  border: 2px dotted rgba(255,134,34,0.5);
}

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

Браузерная поддержка

Начать работу с псевдоклассом :matches() проще всего с Myth.

Чтобы получить больше информации о том, какие браузеры поддерживают данный псевдокласс, обратитесь к from caniuse.com.

Читайте также: Как работает CSS-псевдокласс :not