Сравнение новых псевдоклассов CSS - :is() :where() :has()
HTML-код
- Опубликовано: 6 авг 2024
- 🔥 22 апреля стартует продвинутый курс по вёрстке - frontendblok.com/courses/adva...
⚡️ Скидка 30% на любой тариф до конца недели
Boosty «Мидл на прокачку» - boosty.to/annblok/purchase/75...
Практика на закрепление материала из видео:
(будет опубликовано завтра)
Таймкоды:
00:00 Вступление
00:41 Пример c :is()
02:43 Пример №1 c :is() и :where()
05:56 Курс по верстке со скидкой
06:24 Пример №2 c :is() и :where()
09:35 Больше практики на Boosty
10:09 Пример №3 c :is() и :where()
11:59 Пример №4 c :is() и :where()
13:48 Пример с :has()
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com 
Развлечения
Практика (домашка) для закрепления материала из видео опубликована на Boosty. Доступно подписчикам тарифа «Мидл на прокачку» - boosty.to/annblok/purchase/751559
Вы очень подробно объяснили сравнение новых псевдоклассов CSS. Было полезно узнать много новой инофрмации, спасибо, Анна, за очередной выпуск.
У вас очень грамотные обучающие материалы. Вот что значит хороший подход. Лайк вам.😊
Давно не следил за css, прям спасибо от души, последняя фишка с has классная для стилизации чекбоксов прям огонь, чтоб не ставить класс через js для родителя.
Отличный обзор! Интересно и очень информативно! Спасибо за дельные советы и рекомендации!
спасибо за полезняшки, очень красиво м грамотно, всё как я люблю
Капець я навіть не знав що таке взагалі може бути. Добре що є такі відео.
Хорошое видео, много полезных советов, спасибо ❤
Спасибо большое за видео и информацию. Сравнение то что надо. Многим людям помогло это.
Спасибо большое за то что делитесь своим опытом и знаниями
Спасибо за интересную и полезную информацию.🔥👍
Вот и есть возможность выбора, спасибо за советы.
Спасибо что помогаете!
при оценке специфичности вместо сдвигания туда суда, мне не хватило обычного указания веса, на сколько where ослабляет селектор и на сколько is утяжеляет селектор в числовом значении.
Да, слов нет, довольно интересное, а тглавное очень даже полезное сравнение новых псевдоклассов CSS
Для тех, кто уже весьма достаточно разбирается в вёрстке, продвинутый курс будет в самый раз!
Надо посмотреть ваш предыдущий ролик, а попозже досмотрю и этот)
Спасибо!
очень неплохое видео с очень неплохим контентом
Excelente video 👌
Привет, сочетание красного и черного асоцитируестя с гневом и злостью
Как указать селектор в CSS?Как обратиться к элементу в CSS?
Спасибо за разбор. Это такая сложная тема. Самому еле разберёшься.
Анна, для предыдущего потока продвинутого курса как получить доступ к новым урокам или это не предусмотрено?
Да, если вы были 12 февраля на потоке, то вам курс тоже добавится на аккаунт.
Одна из самых не поддающихся тем для меня, псевдоклассы всегда были проблемой, которая никак не хотела легко решаться. Посмотрим, как будет теперь, вроде стало понятней.
It is a amazing video
16:51 - Ну так и почему :is(h1, p, a, .download) делает более приоритетным по сравнению с традиционной записью только тэги, а .download оставляет менее приоритетным? Где, блин, в этом логика? Такое ощущение, что новые псевдоклассы создавались специально с целью всех запутать...
1. Объяснение примеров запутанное, как по мне.
2. Общая специфичность :is() равна наиболее специфичному из переданных селекторов, :where() - всегда дает ноль вне зависимости, что в скобках.
Также важно, что именно сами данные псевдо-классы не добавляют баллы специфичности (как и not() и has() )
3. :is(.header, .contact) a {...} - специфичность равна 011
.header :is(a, .nav-link) {...} - спец-ть равна 020
.header :where(a, .nav-link) {...} - спец-ть равна 010
.header a {...} - спец. равна 011
.header .nav-link {...} - спец. равна 020
4. Где больше специфичность селектора, то правило используется. Если равенство по баллам, тогда включается каскад (иерархия в коде)
Поддерживаю. Как по мне, тут немного смешана специфичность (целенаправленность объявления) и порядок объявления (кто позже встал, того и тапки).
Хорошо, когда человек разбирается в верстке на уровне профи...
если есть Анна Блок, то должна быть и Анна Инлайн
Новые псевдоклассы в CSS действительно открывают новые возможности для стилизации элементов на веб-странице. Они позволяют более элегантно и эффективно управлять отображением элементов в зависимости от различных состояний и событий.
А если человек 10 лет не обновляет браузер то is скорее всего рабоатть не будет? Поэтому я приверженец javascript, css консервативного типа, чтоб у всех работал
Я тоже стараюсь не использовать нововведения в CSS, не хочется терять пользователей со старыми браузерами. Должно пройти несколько лет.
Спасибо за подробный разбор примеров! С последнего вообще выпал в осадок, не знал что так можно, мой мир никогда не будет прежним…
Такая красивая и программист, я изменил своё мнение об программистах, я думал это замкнутые в себе люди и некрасивые))
Стереотипы в общем. Красотка , лови лайк
Норм фигня так то
Tooop
псевдоклассы всегда были проблемой, которая никак не хотела легко решаться
Смотрю, повторяю и чувствую себя настоящим программистом)))
Непоганий огляд і не менш непогане порівняння псевдокласів.
Из-за этих ваших новых модных штук сайты у пользователей со старыми браузерами не работают. Вы, верстальщики думаете только о своем удобстве, а на бизнес и пользователей вам наплевать. Я бы стал использовать подобные псевдоклассы на своих проектах лет через 5-7, когда уже точно все пользователи браузеры обновят.
Старые? Это какие? IE11? Верстка должна поддерживаться актуальными версиями браузеров всех производителей: ведроид/винда/иось хром/фокс/опера/эдж/рулевое колесо. Если не протестил во всех, ты редиска. А ориентироваться на олдскулов, которые из своих убеждений работают на XP, такое... Это уже их выбор пользоватьсяч старой осью.
И уж если вы бизнес, то вряд ли человек, не нашедший денежки на апдейт компьютера, является вашим покупателем.
@@sniffysko Ну доля IE11 уже действительно ничтожно мала, а вот :has() - поддержка в мире - 92.79%. То есть по вашему, бизнес должен потерять 7,21% клиентов только из-за того, что вам захотелось использовать в верстке новомодные штуки?
какая же ненужная и запутанная вещь is(). И вы еще нормально не преподносите материал : нельзя ли сначала в кратце объяснить с чем мы имеем дело, а не рассказывать 2-3 минуты ненужного текста про порядок и правильность запятых и скобочек ? как написать пример - я и сам вижу, не нужно это проговаривать
Ещё забавно слушать минуту и смотреть в коде в какой цвет поменялись ссылки - это и так видно на странице. Зачем ?
"моя цель здесь учебная" - смешно
потом будешь разбирать всю эту трахомудию неделю. Всё должно быть максимально просто и понятно, а не эти ребусы решать часами, чтоб покрасить заголовок
Согласна с вами! информация должна быть простой и понятной.
вообще это достаточно элементарные вещи. если тебе это тяжело, возможно it не для тебя.
Селекторы :is :were наоборот упрощают восприятие кода. А дураку, сами знаете, подари член стеклянный, он или разобьет или руки порежет. Любое новшество могут обратить во зло.
Фигня
Хорош 👍