Псевдоклассы :is() и :where()

Последнее обновление: 06.07.2021

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

Псевдокласс :is() применяется для сокращения длинных селекторов. Функция псевдокласса :is() принимает список селекторов для выбора элементов html.

Например, мы хотим применить стиль к параграфам, которые находятся в первом уровне вложенности в элементах header, main, footer:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
	<style>
		/* header > p, main > p, footer > p {font-size: 18px; font-family: Verdana;} альтернативный вариант без :is*/
		:is(header, main, footer) > p  {font-size: 18px; font-family: Verdana;}
	</style>
</head>
<body>
<header>
	<p>Text in Header</p>
	<div><p>Text in Header Div</p></div>
</header>
<main>
	<p>Text in Main</p>
	<div><p>Text in Main Div</p></div>
</main>
<footer>
	<p>Text in Footer</p>
	<div><p>Text in Footer Div</p></div>
</footer>
</body>
</html>

В данном случае для параграфов устанавливается шрифт Verdana высотой 18px:

Псевдоклассы :is и :where в CSS

Без использования псевдокласса :is нам пришлось бы написать:

header > p, main > p, footer > p {font-size: 18px; font-family: Verdana;}

Псевдокласс :is позволяет значительно сократить эту запись:

:is(header, main, footer) > p {font-size: 18px; font-family: Verdana;}

То есть в данном случае выражение :is(header, main, footer) выбирает все элементы header, main и footer и объединяет их с последующими селекторами.

Псевдокласс :is может быть вложенным, например, возьмем пример выше, только выберем теперь только те параграфы, которые находятся в элементах div:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
	<style>
		:is(:is(header, main, footer) div) > p  {font-size: 18px; font-family: Verdana;}
	</style>
</head>
<body>
<header>
	<p>Text in Header</p>
	<div><p>Text in Header Div</p></div>
</header>
<main>
	<p>Text in Main</p>
	<div><p>Text in Main Div</p></div>
</main>
<footer>
	<p>Text in Footer</p>
	<div><p>Text in Footer Div</p></div>
</footer>
</body>
</html>
Вложенный псевдокласс :is в CSS

Псевдокласс :where

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
	<style>
		:where(header, main, footer) > p  {font-size: 18px; font-family: Verdana;}
	</style>
</head>
<body>
<header>
	<p>Text in Header</p>
	<div><p>Text in Header Div</p></div>
</header>
<main>
	<p>Text in Main</p>
	<div><p>Text in Main Div</p></div>
</main>
<footer>
	<p>Text in Footer</p>
	<div><p>Text in Footer Div</p></div>
</footer>
</body>
</html>

И мы получим тот же результат, что и для :is():

Псевдоклассы :is и :where в CSS

Различие между :is() и :where()

В чем же разница между :is() и :where()? Псевдокласс :is() применяет каскадность стилей (selector specificity), которая определяется по селектору с самым большим рангом. А для стилей псевдокласса :where() ранг селекторов всегда равен 0.

Рассмотрим на схожем примере. Применение :is():

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
	<style>
		div > :is(h2, #content) { background: red; }
		
		div > h2,
		div > #content {
			background: white;
		}
	</style>
</head>
<body>
<div>
	<h2>Заголовок</h2>
	<div id="content">Основное содержимое</div>
</div>
</body>
</html>

Здесь ранг селекторов в выражении :is(h2, #content) будет вычисляться по наибольшему селектору - в данном случае идентификатору #content. Таким образом, ранг селекторов в псевдоклассе :is() будет составлять 100 баллов (селекторы тегов оцениваются в 1 балл).

Дальше идет селектор div > h2, который переопределяет цвет фона. Но послкольку его ранг меньше, чем ранг div > :is(h2, #content), то этот стиль применяться не будет.

Третий селектор div > #content имеет тот же ранг, что и div > :is(h2, #content), поэтому его стиль будет работать.

В итоге мы получим, что для элемента <h2> переопределение цвета фона не будет работать.

Каскадность стилей и псевдокласс :is в CSS

Теперь изменим на :where():

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
	<style>
		div > :where(h2, #content) { background: red; }
		
		div > h2,
		div > #content {
			background: white;
		}
	</style>
</head>
<body>
<div>
	<h2>Заголовок</h2>
	<div id="content">Основное содержимое</div>
</div>
</body>
</html>

Ранг селектора :where(h2, #content) будет равен 0, поэтому стиль, задаваемый селектором div > :where(h2, #content) будет переопределен последующими стилями.

Каскадность стилей и псевдокласс :where в CSS

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850