Как работают селекторы в CSS? Разбираемся на примерах

Published: 02 October 2022
on channel: David Dobryakov
1,022
15

Привет, в этом видео поговорим об основах языка CSS и постараемся на примерах разобраться как работают селекторы.

Полезные ссылки:

Мой телеграм-канал: https://t.me/davidobryakov
Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/
Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT...
Ссылка на презентацию: https://docs.google.com/presentation/...
Раздел по CSS в доке: https://doka.guide/css/
Комбинированные селекторы в доке: https://doka.guide/css/combined-selec...
Раздел по CSS на MDN: https://developer.mozilla.org/ru/docs...
Раздел по селекторам на MDN: https://developer.mozilla.org/ru/docs...
Лекция в текстовом формате: https://blog.kantegory.me/frontend-cs...

Таймкоды:

00:00 Вступление
00:08 Что такое CSS?
00:23 В чём заключается декларативность CSS?
01:07 Препроцессоры и постпроцессоры
02:16 Языковые конструкции
03:35 Базовые селекторы
04:51 Комбинированные селекторы
06:04 Селектор по состоянию
07:44 Смежные селекторы
11:26 Универсальный селектор
12:34 Селектор по классу, селектор по id
13:00 Селектор по непосредственно вложенным
15:40 Селектор по последующим
18:55 Селектор по вложенным
21:48 Группировка селекторов
22:40 Комбинированный селектор с использованием :not, :is
24:58 Резюмируем (+ псевдоэлементы before и after)
28:55 Что почитать?