Новые функциональные селекторы псевдоклассов CSS :is() и :where().

Эти, казалось бы, небольшие дополнения к синтаксису селекторов CSS окажут большое влияние.

Adam Argyle

При написании CSS иногда могут возникнуть длинные списки селекторов для нескольких элементов с одинаковыми правилами стиля. Например, если вы хотите настроить цвет любых тегов <b> , находящихся внутри элемента заголовка, вы можете написать:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {   color: hotpink; } 

Вместо этого вы можете использовать :is() и улучшить разборчивость, избегая при этом длинного селектора:

:is(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; } 

Разборчивость и удобство более коротких селекторов — это лишь часть ценности, которую :is() и :where() привносят в CSS. В этом посте вы познакомитесь с синтаксисом и значением этих двух функциональных псевдоселекторов.

Совместимость с браузером

:is()

:where()

Встречайте :is() и :where()

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

Группировка селекторов

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

/* at the beginning */ :where(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; }  /* in the middle */ article :is(header,footer) > p {   color: gray; }  /* at the end */ .dark-theme :where(button,a) {   color: rebeccapurple; }  /* multiple */ :is(.dark-theme, .dim-theme) :where(button,a) {   color: rebeccapurple; }  /* stacked */ :is(h1,h2):where(.hero,.subtitle) {   text-transform: uppercase; }  /* nested */ .hero:is(h1,h2,:is(.header,.boldest)) {   font-weight: 900; } 

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

Использование простых и сложных селекторов с :is()

Чтобы освежить знания о селекторах, ознакомьтесь с модулем селекторов на сайте Learn CSS . Вот несколько примеров простых и сложных селекторов, которые помогут проиллюстрировать эту возможность:

article > :is(p,blockquote) {   color: black; }  :is(.dark-theme.hero > h1) {   font-weight: bold; }  article:is(.dark-theme:not(main .hero)) {   font-size: 2rem; } 

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

Разница между :is() и :where()

Когда дело доходит до специфичности, :is() и :where() сильно расходятся. Чтобы узнать больше о специфике, см. модуль специфики в разделе «Изучаем CSS» .

Суммируя

• :where() не имеет конкретики.
  :where() стирает всю специфичность списка селекторов, передаваемого в качестве функциональных параметров. Это первая в своем роде функция выбора.
• :is() учитывает специфику своего наиболее конкретного селектора.
  :is(a,div,#id) имеет показатель специфичности идентификатора, равный 100 баллам.

Выбор селектора с наивысшей специфичностью из списка оказался для меня проблемой только тогда, когда я слишком увлекался группировкой. Мне всегда удавалось улучшить разборчивость, перемещая селектор с высокой специфичностью в отдельный селектор, где он не имел бы такого большого влияния. Вот пример того, что я имею в виду:

article > :is(header, #nav) {   background: white; }  /* better as */ article > header, article > #nav {   background: white; } 

С :where() я жду, когда библиотеки предложат версии без какой-либо конкретики. Конкуренция за специфичность между авторскими стилями и библиотечными стилями может подойти к концу. При написании CSS не будет никакой специфики, с которой можно было бы конкурировать. CSS уже довольно давно работает над такой функцией группировки, она уже здесь, и это все еще во многом неисследованная территория. Получайте удовольствие от создания небольших таблиц стилей и удаления запятых.

Фото Маркуса Винклера на Unsplash

Эти, казалось бы, небольшие дополнения к синтаксису селекторов CSS окажут большое влияние.

Adam Argyle

При написании CSS иногда могут возникнуть длинные списки селекторов для нескольких элементов с одинаковыми правилами стиля. Например, если вы хотите настроить цвет любых тегов <b> , находящихся внутри элемента заголовка, вы можете написать:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {   color: hotpink; } 

Вместо этого вы можете использовать :is() и улучшить разборчивость, избегая при этом длинного селектора:

:is(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; } 

Разборчивость и удобство более коротких селекторов — это лишь часть ценности, которую :is() и :where() привносят в CSS. В этом посте вы познакомитесь с синтаксисом и значением этих двух функциональных псевдоселекторов.

Совместимость с браузером

:is()

:where()

Встречайте :is() и :where()

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

Группировка селекторов

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

/* at the beginning */ :where(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; }  /* in the middle */ article :is(header,footer) > p {   color: gray; }  /* at the end */ .dark-theme :where(button,a) {   color: rebeccapurple; }  /* multiple */ :is(.dark-theme, .dim-theme) :where(button,a) {   color: rebeccapurple; }  /* stacked */ :is(h1,h2):where(.hero,.subtitle) {   text-transform: uppercase; }  /* nested */ .hero:is(h1,h2,:is(.header,.boldest)) {   font-weight: 900; } 

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

Использование простых и сложных селекторов с :is()

Чтобы освежить знания о селекторах, ознакомьтесь с модулем селекторов на сайте Learn CSS . Вот несколько примеров простых и сложных селекторов, которые помогут проиллюстрировать эту возможность:

article > :is(p,blockquote) {   color: black; }  :is(.dark-theme.hero > h1) {   font-weight: bold; }  article:is(.dark-theme:not(main .hero)) {   font-size: 2rem; } 

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

Разница между :is() и :where()

Когда дело доходит до специфичности, :is() и :where() сильно расходятся. Чтобы узнать больше о специфике, см. модуль специфики в разделе «Изучаем CSS» .

Суммируя

• :where() не имеет конкретики.
  :where() стирает всю специфичность списка селекторов, передаваемого в качестве функциональных параметров. Это первая в своем роде функция выбора.
• :is() учитывает специфику своего наиболее конкретного селектора.
  :is(a,div,#id) имеет показатель специфичности идентификатора, равный 100 баллам.

Выбор селектора с наивысшей специфичностью из списка оказался для меня проблемой только тогда, когда я слишком увлекался группировкой. Мне всегда удавалось улучшить разборчивость, перемещая селектор с высокой специфичностью в отдельный селектор, где он не имел бы такого большого влияния. Вот пример того, что я имею в виду:

article > :is(header, #nav) {   background: white; }  /* better as */ article > header, article > #nav {   background: white; } 

С :where() я жду, когда библиотеки предложат версии без какой-либо конкретики. Конкуренция за специфичность между авторскими стилями и библиотечными стилями может подойти к концу. При написании CSS не будет никакой специфики, с которой можно было бы конкурировать. CSS уже довольно давно работает над такой функцией группировки, она уже здесь, и это все еще во многом неисследованная территория. Получайте удовольствие от создания небольших таблиц стилей и удаления запятых.

Фото Маркуса Винклера на Unsplash

Эти, казалось бы, небольшие дополнения к синтаксису селекторов CSS окажут большое влияние.

Adam Argyle

При написании CSS иногда могут возникнуть длинные списки селекторов для нескольких элементов с одинаковыми правилами стиля. Например, если вы хотите настроить цвет любых тегов <b> , находящихся внутри элемента заголовка, вы можете написать:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {   color: hotpink; } 

Вместо этого вы можете использовать :is() и улучшить разборчивость, избегая при этом длинного селектора:

:is(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; } 

Разборчивость и удобство более коротких селекторов — это лишь часть ценности, которую :is() и :where() привносят в CSS. В этом посте вы познакомитесь с синтаксисом и значением этих двух функциональных псевдоселекторов.

Совместимость с браузером

:is()

:where()

Встречайте :is() и :where()

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

Группировка селекторов

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

/* at the beginning */ :where(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; }  /* in the middle */ article :is(header,footer) > p {   color: gray; }  /* at the end */ .dark-theme :where(button,a) {   color: rebeccapurple; }  /* multiple */ :is(.dark-theme, .dim-theme) :where(button,a) {   color: rebeccapurple; }  /* stacked */ :is(h1,h2):where(.hero,.subtitle) {   text-transform: uppercase; }  /* nested */ .hero:is(h1,h2,:is(.header,.boldest)) {   font-weight: 900; } 

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

Использование простых и сложных селекторов с :is()

Чтобы освежить знания о селекторах, ознакомьтесь с модулем селекторов на сайте Learn CSS . Вот несколько примеров простых и сложных селекторов, которые помогут проиллюстрировать эту возможность:

article > :is(p,blockquote) {   color: black; }  :is(.dark-theme.hero > h1) {   font-weight: bold; }  article:is(.dark-theme:not(main .hero)) {   font-size: 2rem; } 

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

Разница между :is() и :where()

Когда дело доходит до специфичности, :is() и :where() сильно расходятся. Чтобы узнать больше о специфике, см. модуль специфики в разделе «Изучаем CSS» .

Суммируя

• :where() не имеет конкретики.
  :where() стирает всю специфичность списка селекторов, передаваемого в качестве функциональных параметров. Это первая в своем роде функция выбора.
• :is() учитывает специфику своего наиболее конкретного селектора.
  :is(a,div,#id) имеет показатель специфичности идентификатора, равный 100 баллам.

Выбор селектора с наивысшей специфичностью из списка оказался для меня проблемой только тогда, когда я слишком увлекался группировкой. Мне всегда удавалось улучшить разборчивость, перемещая селектор с высокой специфичностью в отдельный селектор, где он не имел бы такого большого влияния. Вот пример того, что я имею в виду:

article > :is(header, #nav) {   background: white; }  /* better as */ article > header, article > #nav {   background: white; } 

С :where() я жду, когда библиотеки предложат версии без какой-либо конкретики. Конкуренция за специфичность между авторскими стилями и библиотечными стилями может подойти к концу. При написании CSS не будет никакой специфики, с которой можно было бы конкурировать. CSS уже довольно давно работает над такой функцией группировки, она уже здесь, и это все еще во многом неисследованная территория. Получайте удовольствие от создания небольших таблиц стилей и удаления запятых.

Фото Маркуса Винклера на Unsplash

Эти, казалось бы, небольшие дополнения к синтаксису селекторов CSS окажут большое влияние.

Adam Argyle

При написании CSS иногда могут возникнуть длинные списки селекторов для нескольких элементов с одинаковыми правилами стиля. Например, если вы хотите настроить цвет любых тегов <b> , находящихся внутри элемента заголовка, вы можете написать:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {   color: hotpink; } 

Вместо этого вы можете использовать :is() и улучшить разборчивость, избегая при этом длинного селектора:

:is(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; } 

Разборчивость и удобство более коротких селекторов — это лишь часть ценности, которую :is() и :where() привносят в CSS. В этом посте вы познакомитесь с синтаксисом и значением этих двух функциональных псевдоселекторов.

Совместимость с браузером

:is()

:where()

Встречайте :is() и :where()

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

Группировка селекторов

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

/* at the beginning */ :where(h1,h2,h3,h4,h5,h6) > b {   color: hotpink; }  /* in the middle */ article :is(header,footer) > p {   color: gray; }  /* at the end */ .dark-theme :where(button,a) {   color: rebeccapurple; }  /* multiple */ :is(.dark-theme, .dim-theme) :where(button,a) {   color: rebeccapurple; }  /* stacked */ :is(h1,h2):where(.hero,.subtitle) {   text-transform: uppercase; }  /* nested */ .hero:is(h1,h2,:is(.header,.boldest)) {   font-weight: 900; } 

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

Использование простых и сложных селекторов с :is()

Чтобы освежить знания о селекторах, ознакомьтесь с модулем селекторов на сайте Learn CSS . Вот несколько примеров простых и сложных селекторов, которые помогут проиллюстрировать эту возможность:

article > :is(p,blockquote) {   color: black; }  :is(.dark-theme.hero > h1) {   font-weight: bold; }  article:is(.dark-theme:not(main .hero)) {   font-size: 2rem; } 

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

Разница между :is() и :where()

Когда дело доходит до специфичности, :is() и :where() сильно расходятся. Чтобы узнать больше о специфике, см. модуль специфики в разделе «Изучаем CSS» .

Суммируя

• :where() не имеет конкретики.
  :where() стирает всю специфичность списка селекторов, передаваемого в качестве функциональных параметров. Это первая в своем роде функция выбора.
• :is() учитывает специфику своего наиболее конкретного селектора.
  :is(a,div,#id) имеет показатель специфичности идентификатора, равный 100 баллам.

Выбор селектора с наивысшей специфичностью из списка оказался для меня проблемой только тогда, когда я слишком увлекался группировкой. Мне всегда удавалось улучшить разборчивость, перемещая селектор с высокой специфичностью в отдельный селектор, где он не имел бы такого большого влияния. Вот пример того, что я имею в виду:

article > :is(header, #nav) {   background: white; }  /* better as */ article > header, article > #nav {   background: white; } 

С :where() я жду, когда библиотеки предложат версии без какой-либо конкретики. Конкуренция за специфичность между авторскими стилями и библиотечными стилями может подойти к концу. При написании CSS не будет никакой специфики, с которой можно было бы конкурировать. CSS уже довольно давно работает над такой функцией группировки, она уже здесь, и это все еще во многом неисследованная территория. Получайте удовольствие от создания небольших таблиц стилей и удаления запятых.

Фото Маркуса Винклера на Unsplash