Перейти к содержанию

:is()

Псевдокласс :is() принимает список селекторов в качестве аргумента и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно для написания больших селекторов в более компактной форме.

Псевдоклассы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

/* Backwards-compatible version with :-*-any() and :matches()
   (It is not possible to group selectors into single rule,
   because presence of invalid selector would invalidate whole rule.) */
:-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;
}

Спецификация

Пример

Пример 1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<header>
  <p>This is my header paragraph</p>
</header>

<main>
  <ul>
    <li>
      <p>This is my first</p>
      <p>list item</p>
    </li>
    <li>
      <p>This is my second</p>
      <p>list item</p>
    </li>
  </ul>
</main>

<footer>
  <p>This is my footer paragraph</p>
</footer>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
:-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;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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
    )
  })
}

Пример 2

Псевдокласс :is() может значительно упростить ваши CSS-селекторы. Например, следующий CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* 3-deep (or more) unordered lists use a 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;
}

можно заменить на:

1
2
3
4
5
6
/* 3-deep (or more) unordered lists use a 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;
}

Пример 3

Псевдокласс :is() особенно полезен при работе с разделами и заголовками HTML5. Поскольку <section>, <article>, <aside> и <nav> обычно вкладываются вместе, без :is(), их стилизация для соответствия друг другу может быть сложной.

Например, без :is() стилизация всех элементов <h1> на разных глубинах может быть очень сложной:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}
/* Level 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;
}
/* Level 3 */
/* ... don't even think about it! */

Использование :is(), однако, намного проще:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav)
  :is(section, article, aside, nav)
  h1 {
  font-size: 20px;
}
/* Level 3 */
:is(section, article, aside, nav)
  :is(section, article, aside, nav)
  :is(section, article, aside, nav)
  h1 {
  font-size: 15px;
}

См. также

Ссылки

  • Псевдо-класс :is() MDN (рус.)

Комментарии