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

preview_player
Показать описание
#shorts Посмотрим на то, как работаю псевдоклассы :has и :not на примере реальной задачи.

🔗 Ссылки:
- 19 часов видео
- 19 упражнений
- 15 тестов
- Неограниченный по времени доступ

  1. PurpleSchool | Anton Larichev
  2. псевдоклассы css
  3. html
  4. css
  5. css has
  6. css not
Рекомендации по теме
CSS: Псевдоклассы :not 0:00:49

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

14. CSS псевдоклассы 0:12:06

14. CSS псевдоклассы — child, not. Состояния hover, focus и focus-visible, active, disabled, checked...

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

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

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

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

:has в CSS 0:16:12

:has в CSS — псевдокласс из будущего 👽 на примере карточки новости...

CSS уроки. Псевдокласс 0:00:40

CSS уроки. Псевдокласс not.

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

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

CSS user-invalid — 0:01:00

CSS user-invalid — псевдокласс, о котором ты не знал

Псевдоклассы :is и 0:12:09

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

CSS pseudo-class :not(). 0:02:07

CSS pseudo-class :not(). Как писать меньше кода?

Фильтрация элементов/карточек на 0:04:22

Фильтрация элементов/карточек на веб-странице с помощью CSS-псевдоклассов :has() и :not() [без JS]...

Новый псевдокласс CSS, 0:04:35

Новый псевдокласс CSS, который облегчит жизнь

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

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

Курс HTML5 и 0:03:00

Курс HTML5 и CSS3. Псевдоклассы (first-child, last-child, nth-child)

Псевдо-классы :invalid & 0:11:48

Псевдо-классы :invalid & :valid в CSS | Pseudo-classes :invalid & :valid in CSS | Full CSS c...

Вопросы по Frontend: 0:00:11

Вопросы по Frontend: что такое псевдоклассы в CSS?

Всё про Псевдоклассы 0:20:39

Всё про Псевдоклассы в CSS3, Псевдоклассы CSS на примерах, Видео курс по CSS, Урок 22...

Классный эффект наведения 0:13:26

Классный эффект наведения с HAS NOT псевдоклассами

CSS псевдоэлементы. Псевдоэлементы 0:14:31

CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11...

CSS с нуля. 0:00:51

CSS с нуля. Псевдокласс nth-of-type()

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

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

Курс HTML/CSS Advanced 0:21:31

Курс HTML/CSS Advanced | CSS псевдоклассы (pseudo classes): Как задавать стили для HTML-элементов...

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

Псевдоэлементы и псевдоклассы в CSS: расширяем возможности CSS селекторов...

#11. Уроки по 0:29:54

#11. Уроки по CSS для НАЧИНАЮЩИХ (Псевдоклассы, псевдоэлементы)...

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

🔗 Ссылки:
- 19 часов видео
- 19 упражнений
- 15 тестов
- Неограниченный по времени доступ

PurpleSchool
Автор

Я 14 лет верстаю сайты и без псевдокласса has прекрасно обхожусь. В примере и для итога и для элементов используется один и тот же класс - это уже можно назвать ошибка верстки. В реальности и has и not используется ну очень для чего то необычного.

rlevvv
Автор

Про совместимость has мы конечно же не скажем

randyhardy
Автор

:has лучше пока не использовать, совсем новый псевдокласс, не всеми браузерами поддерживаемый, и после хорошей поддержки, еще нужно будет ждать, пока стабилизируется. А :not вполне полезный, но он скорее как альтернатива другим методам выбора элементов. Тут уже каждому своё)

lnfsikv
Автор

Разве нельзя просто указать красить толька четных или нечетных поnth child?

loltron
Автор

Можете, пожалуйста, объяснить новичку. Почему вы указали тег, у которого якобы нет класса "card", хотя у итога он прописан? Как это так работает?

Yuta___.
Автор

Класс😮 А что за тема у Вас в редакторе?

arslan-n
Автор

Ужос какой, скоро ксс превратится в язык программирования, но с ужасным синтаксисом.

karelalex