CSS псевдоклассы - child, not. Состояния hover, focus и focus-visible, active, disabled и checked
HTML-код
- Опубликовано: 26 июл 2024
- ✏️ На этом уроке разбираем псевдоклассы группы child, not, псевдоклассы состояний hover, focus, focus-visible, active, disabled и checked.
🔴 Timeline:
▶ 00:00 | План урока
▶ 00:13 | Псевдоклассы
▶ 00:47 | Псевдоклассы группы child (first-child, last-child, nth-child, nth-last-child)
▶ 03:07 | Сервис nth-child Selector Tester
▶ 03:33 | Псевдокласс only-child
▶ 03:48 | Псевдокласс not
▶ 05:28 | Псевдоклассы состояний (hover, focus, focus-visible, active)
▶ 07:49 | Псевдокласс disabled
▶ 08:24 | Псевдокласс checked
▶ 09:21 | Стилизация input checkbox / radio
▶ 11:45 | Что дальше
📚 Полезные ссылки:
➖ Современный справочник по CSS: doka.guide/css/
➖ Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox: developer.mozilla.org/ru/
➖ Сервис nth-child Selector Tester: nth-child.belter.io/
➖ Статья 'Как прятать' от htmlacademy: htmlacademy.ru/blog/css/short-12
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css
![MAF Teeski - Whole Thing (feat. VonOff1700) [Official Music Video]](http://i.ytimg.com/vi/SHWEj-ndz6g/mqdefault.jpg)
Ничего себе - насколько nth-child мощный!
Да приятно слушать, хорошая подача 👍
Очень доходчиво объяснил! Хотелось бы больше видосов по CSS разного уровня.
Супер, спасибо огромное
круто, спасибо за видео) будет здорово если будет видео по ally, где будет разобрано :focus-within и правильное взаимодействие с этим и подобными псевдоклассами
Привет! По доступности будет мини-курс, но конкретно про :focus-within не думал, весьма ситуативный псевдокласс)
Будет ли курс по JavaScript?
Привет! Будет, но после CSS и серии мастер-классов по верстке.
Привет. В видео был checkbox так что думаю вопрос хоть немного будет в тему. Столкнулся с select. Вопрос в том нужно ли сохранять оригинальный select и прятать его, или можно не заморачиваться и просто сделать кастомный на div?
Привет! Сохранять и визуально прятать оригинальный однозначно. А рядом имитировать кастомный селект на дивах. Это нужно, чтобы корректно управлять отправляемыми формой данными.
Спасибо. Сложная тема с этими кастомными формами, с нетерпением жду видео. :) Про кастомный календарь боюсь даже в поиск вводить@@AleksanderLamkov
Кастомный календарь - страшилка для многих фронтов :) Тут даже я, любитель делать все компоненты с нуля, взял бы готовую либу и подкорректировал под нужны проекта.
js не знаю. Взял готовое решение по select, сижу уже час, поправляю css. Это походу особый вид мазохизма поправлять после кого то css:).@@AleksanderLamkov
С удовольствием бы записал видеогайд по кастомному селекту, но хочется делать подобное исключительно после выпуска полноценного курса по джаваскрипту :)
Почему то у меня last-child не работает на теге , не работают на нем стили CSS 😮💨
Надо посмотреть по DevTools вкладку Elements. Выдели нужный тебе элемент и посмотри панель Styles.
Здравствуйте, а как же visited , для посещенных ссылок 🙂
Привет! А вот про этот псевдокласс забыл :) Спасибо за внимательность! Обязательно добавлю его в следующую версию курса.
Александр привет,на сколько я знаю приминение псевдоклассов :focus, :hover, :active задаються в таком порядке? чтобы избежать конфликтов между ними.
Привет! Использовать их в одном селекторе не совсем правильный подход. Это разные псевдоклассы для разных целей. А если в целом про порядок их использования в CSS-коде, то нет никакой разницы, они никак не конфликтуют друг с другом.
Скрыть инпут для чекбокса можно аттрибутом hidden, без использования длинных кусков стилей сокрытия
Привет! Увы, так не получится.
Подобное сокрытие будет равносильно display none.
При таком атрибуте чекбокс перестанет быть интерактивным, с ним нельзя будет провзаимодействовать, в т. ч. через скринридеры.
В этой статье вопросы по правильному сокрытию инпута разобраны подробнее:
www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/