Псевдоклассы :is и :where в CSS. Как работают и в чем разница?

preview_player
Показать описание
Разбираем как работают псевдоклассы is и where, в чем особенности и что где использовать.
Заходите в телеграм канал. Там я публикую ссылки на полезные сервисы и макеты для практики верстки.
Приятного просмотра!

Документация:

Как писать код быстрее?
Верстка mobile first
Что можно поместить в CSS-переменную?

Телеграм:
Моя страница в ВК:

Содержание:
00:00 Привет и базовое использование
04:23 Невалидные селекторы
05:42 Приоритет
07:16 Псевдокласс where
09:50 Применение и поддержка

#html #css #frontend
  1. VIMP dev — верстка сайтов
  2. html
  3. css
  4. web
  5. development
  6. js
Рекомендации по теме
Псевдоклассы :is и 0:12:09

Псевдоклассы :is и :where в CSS. Как работают и в чем разница?

CSS3 #4 Псевдоэлементы 0:12:43

CSS3 #4 Псевдоэлементы и псевдоклассы (Pseudo-elements & Pseudo-classes)...

CSS: Псевдоклассы :not 0:00:49

CSS: Псевдоклассы :not и :has на примере

Псевдоклассы и псевдоэлементы. 0:04:23

Псевдоклассы и псевдоэлементы. Теория

Псевдоклассы и псевдоэлементы 0:13:48

Псевдоклассы и псевдоэлементы css на практике

Псевдоклассы в CSS 0:19:47

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

Сравнение новых псевдоклассов 0:16:52

Сравнение новых псевдоклассов CSS — :is() :where() :has()

#30 Псевдоклассы: hover, 0:18:00

#30 Псевдоклассы: hover, visited, active, focus, first-child и т.п. [Курс по Верстке от AROKEN]...

Псевдокласс отрицания :not() 0:06:33

Псевдокласс отрицания :not() в CSS || Pseudo-class negation :not() in CSS || Full CSS course...

Псевдокласс :first-of-type в 0:05:06

Псевдокласс :first-of-type в CSS || Pseudo-class :first-of-type in CSS | Full CSS course from A to Z...

Псевдокласс :any-link в 0:03:37

Псевдокласс :any-link в CSS || Pseudo-class :any-link in CSS || Full CSS course from A to Z...

CSS. Урок 18. 0:08:20

CSS. Урок 18. Псевдоклассы

Псевдоклассы CSS при 0:08:01

Псевдоклассы CSS при событиях мыши

Урок 80. Псевдокласс 0:02:00

Урок 80. Псевдокласс :default CSS

CSS псевдокласс отрицания 0:05:10

CSS псевдокласс отрицания :not

Псевдокласс target в 0:05:36

Псевдокласс target в CSS || Pseudo-class target in CSS || Full CSS course from A to Z

Псевдоклассы :enabled & 0:08:08

Псевдоклассы :enabled & :disabled в CSS || Pseudo-classes :enabled & :disabled in CSS || Ful...

псевдоклассы в css 0:13:39

псевдоклассы в css

Изучение CSS для 0:26:54

Изучение CSS для новичков / Урок #4 – Псевдоклассы и псевдоэлементы...

Псевдокласс :only-of-type в 0:04:10

Псевдокласс :only-of-type в CSS || Pseudo-class :only-of-type in CSS || Full CSS course

Как использовать псевдоклассы 0:10:40

Как использовать псевдоклассы CSS?

Полезные CSS псевдоклассы 0:00:13

Полезные CSS псевдоклассы

Псевдокласс :has. Как 0:24:41

Псевдокласс :has. Как обратиться к родительскому элементу в CSS...

Псевдокласс :nth-last-child в 0:07:32

Псевдокласс :nth-last-child в CSS || Pseudo-class :nth-last-child in CSS || Full CSS course...

Комментарии
Автор

Важно!
Где-то на 9:10 то, что я говорю, противоречит тому, что показывает редактор.
Он показывает специфичность 0 4 1, а я говорю, что там 0.
Тут стоит понимать, что редактор не учитывает что это за псевдокласс.
По умолчанию любой псевдокласс наравне с обычными классами добавляет +1 во второй столбик специфичности. Это видно в талице, на второй строке.

VIMPdev
Автор

Очень интересное видео! Спасибо, возьмем на заметку в будущем ну или можно будет ))

ruslanhd
Автор

В мобилках пока слабо поддерживается так что смысла нет

SilverusDragonitos