Псевдокласс :matches()

Псевдокласс :matches() применят стиль к группе простых селекторов или к элементам HTML5 содержащие дочерние элементы. Псевдокласс :matches() предназначен избежать повторения стиля для элементов значение которых совпадает.

Синтаксис

В качестве аргумента псевдокласс :matches() берёт список допустимых селекторов.

:matches( selector[, selector]* )

Список элементов значение которых совпадает.

    section section 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;
     }

Упростить стиль для повторяющихся элементов:

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

Упрощенный вариант можно трактовать так: “если тег h1 внутри этих элементов, которые в свою очередь находится внутри этих же элементов, выполняется действие.”

для :matches()

  • Псевдокласс :matches() является селекторами четвёртого уровня CSS4.
  • Раньше спецификация для псевдокласса :any поддерживалась с префиксами -moz- и -webkit-. В ближайшем будущем синтаксис и название :-vendor-any() будет изменен.
  • Аргумент не должен быть псевдоэлементом или комбинатором. Например:
    :matches(:not(...))
    :not(:matches(...))
    :matches(:matches(...))

Поддержка

Ещё псевдоклассы CSS4