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

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

Таймкоды:
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

[wdm]

В качестве препроцессора, для удобства, был использован Sass.

[TierStar]

Спасибо, все очень понятно и с ваших слов легко усваивается.

[Denis-fert]

Очень наглядно и понятно! Палец вверх)

[АнастасияЗолотарева-пч]

Спасибо, очень полезный урок, в принципе как и все Ваши уроки

[vitaliy]

Спасибо! Хотелосьбы чтобы уроки короче кусками были нарезаны и сортированы один урок линки, другой инпуты и т.д.

[CLEARSKY]

Спасибоооо, а то сайт норм, а оформление не очень красивое. Спасибо ещё раз!!!

[prometheusmusic]

Круто рассказал и разложил все по полочкам! Лайк! Наконец-то я понял тайп-чайлд селекторы. А поиск по атрибутам - интересная штука, только я не понял разницу между |= и ^=. Типо первое ищет полноценное слово, а второе - просто подстроку?

[ТимурРашидов-йя]

На чем это вы работаете? Где на этому можно практиковаться? Подскажите пожалуйста

[overcomeaging]

"инвалИд" конечно очень интересный селектор )

[ArtyomStouch]

Господа, как в css при выборе одного из body>nav>input[type="radio"] задать действие для другого блока body>div>img - то есть вернутся по дом дереву назад, зайти div и задать свойства img ?

[alex_vav]

отличное видео. подписываюсь.
подскажи что нужно сделать с firefox что бы такая же цветовая схема была как у тебя.

ps оказывается ff dev это..

[ВасилийСтоляр-иб]

Как автоподстановка кода происходит?

PS: понял emmet сокращения и кнопка tab, или пишем имя тега без скобок и тоже нажимаем tab

[pronice]

*Как ты быстро набираеш коды не могу понять??*

[volodymyr]

Спасибо большое, очень познавательный урок.
Подскажите пожалуйста, как разобраться с вариациями:
:nth-child(2n+1)
:nth-child(0n+1)
:nth-child(-n+3)

[justspartak]

Не пойму, где фигурные скобки в сss, те же точки с запятой?!