HTML-academy. Часть 2. Селекторы в CSS 3.

Этот канал я использую, как свою тетрадь, в которой пишу, что изучил, прочитал запомнил и т. д., чтобы потом можно было вернуться и повторить. Для понимая, можете прочитать 1 статью.

Решил законспектировать эту тему, так как ней для меня было много нового. Напомню, я прохожу марафон от HTML-academy по HTML-верстке.

Типы селекторов

• Селектор по типу элемента: к примеру -

К каждому элементу <li> будет применен черный фон и белый цвет текста

• Селектор по классу: к примеру -

К каждому элементу с классом "amount-list" будет применен черный фон и белый текст

• Селекторы по id (идентификатору) - не рекомендуются к использованию(по версии HTML-academy): к примеру -

К каждому элементу, у которого задан id="amount-list" через атрибут, будет применен черный фон и белый цвет текста

• Селекторы по атрибуту: к примеру -

Добавит ко всем полям ввода с типом password желтый цвет фона

Подробней можно прочитать здесь.

Комбинирование селекторов

• Перечисление через запятую: к примеру -

К элементам li и p будет применен красный цвет фона

• Селекторы-потомки: записываются через пробел, читаются справа налево, применяется в независимости от уровня вложенности, к примеру -

Ко всем элементам p, которые находятся внутри элементов li, будет применен красный фон

• Дочерние селекторы: выбирает только дочерние селекторы, которые находятся внутри, на первом уровнем вложенности, к примеру -

К элементу p, на первом уровне вложенности в li, будет применен красный цвет фона

• Комбинатор следующего соседнего элемента: стиль будет применен только в том случае, если один элемент идет сразу же за другим, применен будет к правому крайнему элементу, к примеру -

К элементу с классом "first-name" будет применен стиль, только если он идет следом за элементом с классом "amount-list"

• Комбинирование комбинирований, к примеру -

К элементу с классом "first-name" будет применен стиль, если он идет следом за элементом с классом "amount-list", который, в свою очередь, является потомком элемента с классом "main-list"

В целом, ничего сложного, осталось структурировать знания в свое голове и начать их применять на каком-нибудь своем "домашнем" проекте. Так же в теме разбирались псевдоклассы, но о них сделаю запись чуть позже.

Просто кот :)

Спасибо, что дочитали до конца. Если я где-то ошибся, просьба поправить в комментариях.

Предыдущую мою запись о старте марафона по верстке на HTML-academy можно прочитать здесь.