CSS Селекторы: Полное руководство | Все селекторы в одном уроке

💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/b...

Сегодня мы рассмотрим все существующие CSS селекторы для более грамотной выборки HTML элементов при стилизации. В качестве препроцессора, для удобства, будем использовать Sass.

Страница урока: https://webdesign-master.ru/blog/html...

Таймкоды:
00:00 Начало урока
00:55 .class (class)
02:00 section (element)
03:02 id
03:50 Каскад CSS элементов
05:09 Список CSS элементов
06:05 Дочерний CSS элемент, длинна каскада
11:20 Следующий за селектором CSS элемент (+)
12:57 Все элементы после определенного (~)
15:00 Универсальный селектор (*)
15:42 Первое слово в значении атрибута до тире ([attribute|=value])
18:17 Подстрока в начале значения атрибута ([attribute^=value])
19:59 Подстрока в конце значения атрибута ([attribute$=value])
20:52 Подстрока в значении атрибута ([attribute*=value])
21:30 Активный CSS элемент и элемент с фокусом (:active и :focus)
23:12 Псевдоэлементы ::after и ::before
25:52 input:checked
27:15 input:disabled
28:47 Пустой элемент (:empty)
30:20 Исключаемые CSS элементы (:not)
31:10 input:enabled
31:34 Первый элемент набора (:first-child)
21:12 Последний элемент набора (:last-child)
33:30 Первая буква текста внутри CSS элемента (::first-letter)
33:55 Первая строка текста внутри CSS элемента (::first-line)
34:20 Первый элемент набора определенного типа (:first-of-type)
35:21 Последний элемент набора определенного типа (:last-of-type)
35:31 Поведение элемента при наведении курсора мыши (:hover)
35:52 input:invalid
36:58 Порядковый номер элемента (:nth-child)
39:30 Порядковый номер элемента по типу (:nth-of-type)
40:45 Только дочерний элемент (:only-child)
41:26 input:optional
41:53 Превышение ограничений в input (:out-of-range)
42:29 input:read-only
43:08 input:read-write
43:33 :target
46:27 :visited

ВКонтакте: https://vk.com/jediweb
Телеграм: https://t.me/jediweb
Дзен: https://dzen.ru/jediweb