Виды селекторов в CSS - часть 2
Селекторы - это достаточно мощный инструмент который позволяет нам выбирать элементы не только по тегу но и по различным атрибутам, будь то id, class или любой атрибут, а также выбирать элементы по наведению мышки, четные или нечетные и многое другое.
Рассмотрим самые распространенные селекторы:
1. Селектор по тегу - самый простой селектор который помогает нам выбрать элементы по названию их тега, для этого нам нужно только указать название тега без скобок.
p {
color: red;
}2. Селектор по классу. Если мы хотим привязывать стили только к определенным элементам мы можем использовать селекторы по классу, для этого нам необходимо задать атрибут class с для тега html с логическим значением. Для того чтобы добраться к элементу по классу нам нужно перед значением атрибута class нужного нам элемента поставить '.' точку.
.block {
text-decoration: underline;
color: blue;
}3. Селектор по атрибуту. Работает абсолютно аналогично селектору по классу, но имеет другой синтаксис [имя-атрибута="значение атрибута"]
[href="#"] {
color: blue;
font-weight: bold;
font-size: 30px;
}Аналогично можно использовать селектор только по названию атрибута, без значения.
[href] {
text-transform: uppercase;
}4. Селектор по идентификатору. Этот селектор похож на селектор выборки элементов по классу но ключевое отличие состоит в том что для использования такого селектора вам необходимо давать html тегам атрибут id, а значение этого атрибута в свою очередь должно быть уникально в рамках всей страницы. Из-за этих ограничений вы не можете создавать одинаковые атрибуты id на всех тегах, так как это будет ошибкой.
Пример выбора элемента по id:
#main-title {
font-weight: bold;
text-decoration: line-through;
}P.S. - Больше уроков у меня на канале
P.P.S. - Файлы с урока
