path: root/files/ru/web/css/_colon_is/index.html

---
title: ':is() (:matches(), :any())'
slug: 'Web/CSS/:is'
translation_of: 'Web/CSS/:is'
---
<p>{{CSSRef}}{{SeeCompatTable}}</p>

<div class="blockIndicator note">
<p><strong>Примечание:</strong> <code>:matches()</code> был переименован в <code>:is()</code> в <a href="https://github.com/w3c/csswg-drafts/issues/3258" style="white-space: nowrap;">CSSWG issue #3258</a>.</p>
</div>

<p><strong><code>:is()</code></strong> это функция <a href="/ru/docs/Web/CSS">псевдо-класс CSS</a> принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.</p>

<p>Заметьте, что в данный момент бразуеры поддерживают ее функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдо-класс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что  <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p>

<pre class="brush: css no-line-numbers notranslate">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* Пример приведенный выше эквивалентен следующему */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

/* Обратно-совместимая версия с:-*-any() и :matches()
   (Это невозможно сгруппировать селекторы в одно правило,
    так как присутствие одного неверного селектора аннулирует все правило.) */
:-webkit-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
:-moz-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
</pre>

<h2 id="Синтаксис">Синтаксис</h2>

{{CSSSyntax}}

<h2 id="Примеры">Примеры</h2>

<h3 id="Кроссбраузерный_пример">Кроссбраузерный пример</h3>

<pre class="brush: html notranslate">&lt;header&gt;
  &lt;p&gt;Это мой параграф в шапке&lt;/p&gt;
&lt;/header&gt;

&lt;main&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;p&gt;Это первый&lt;/p&gt;&lt;p&gt;пункт списка&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;p&gt;Это второй&lt;/p&gt;&lt;p&gt;пункт списка&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/main&gt;

&lt;footer&gt;
  &lt;p&gt;Это мой параграф в подвале&lt;/p&gt;
&lt;/footer&gt;</pre>

<pre class="brush: css notranslate">:-webkit-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:-moz-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
</pre>

<pre class="brush: js notranslate">let matchedItems;

try {
  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
} catch(e) {
  try {
    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
  } catch(e) {
    try {
      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
    } catch(e) {
      try {
        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
      } catch(e) {
        console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
      }
    }
  }
}

matchedItems.forEach(applyHandler);

function applyHandler(elem) {
  elem.addEventListener('click', function(e) {
    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
  });
}</pre>

<p>{{EmbedLiveSample("Cross-browser_example", "100%", 300)}}</p>

<h3 id="Упрощение_списка_селекторов">Упрощение списка селекторов</h3>

<p>Псевдо-класс <code>:is()</code> может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:</p>

<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */
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;
}
</pre>

<p>... можно заменить на:</p>

<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */
: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;
}</pre>

<h3 id="Упрощение_селекторов_разделов">Упрощение селекторов разделов</h3>

<p>Псевдо-класс <code>:is()</code>  особенно полезен  при работе с <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">заголовками и разделами</a> HTML5. C тех пор как {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} обычно используют вместе, без <code>:is()</code>, стилизовать их, чтобы они соответствовали друг друг, может быть не просто.</p>

<p>К примеру, без <code>:is()</code>, стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:</p>

<pre class="brush: css notranslate">/* Уровень 0 */
h1 {
  font-size: 30px;
}
/* Уровень 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* Уровень 2 */
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;
}
/* Уровень 3 */
/* ... даже не смей думать об этом! */
</pre>

<p>Используя <code>:is()</code>, как видно, это гораздо легче:</p>

<pre class="brush: css notranslate">/* Уровень 0 */
h1 {
  font-size: 30px;
}
/* Уровень 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Уровень 2 */
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Уровень 3 */
:is(section, article, aside, nav)
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 15px;
}</pre>

<h3 id="Как_избежать_аннулирования_списка_селекторов">Как избежать аннулирования списка селекторов</h3>

<p>В отличие от <a href="/ru/docs/Web/CSS/Selector_list">списка селекторов</a>, псевдо-класс <code>:is()</code> не аннулируется, когда из селекторов, попавший туда не поддерживается бразуером.</p>

<pre class="brush: css notranslate">:is(:valid, :unsupported) {
  ...
}</pre>

<p>Будет по прежнему определяться правильно и соответствовать <code>:valid</code> даже в браузерах, которые не поддерживают <code>:unsupported</code>, в то время как:</p>

<pre class="brush: css notranslate">:valid, :unsupported {
  ...
}</pre>

<p>Будет проигнорировано бразуерами, которые не поддерживают <code>:unsupported</code> даже если они поддерживают <code>:valid</code>.</p>

<h3 id="Разница_между_is_и_where">Разница между :is() и :where()</h3>

<p>Разница между этими двумя, в том что <code>:is()</code> учитывает спецификацию общего селектора (он принимает специфику своего самого конкретного аргумента), в то же время <code><a href="/en-US/docs/Web/CSS/:where">:where()</a></code> имеет значение спецификации равное 0. Это можно увидеть на <a href="/en-US/docs/Web/CSS/:where#Examples">примере на странице документации <code>:where()</code> </a>.</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>



<p>{{Compat("css.selectors.is")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - Like <code>:is()</code>, but with 0 <a href="/en-US/docs/Web/CSS/Specificity">specificity</a>.</li>
 <li><a href="/ru/docs/Web/CSS/Selector_list">Список селекторов</a></li>
 <li><a href="/ru/docs/Web/Web_Components">Веб компоненты</a></li>
</ul>