Селекторы — это часть правила CSS, которые позволяют определить к какому элементу веб страницы следует применять правила. Они могут быть: простыми, сложными, составными (список селекторов).
К простым селекторам относятся:
- классы;
- селектор тега;
- идентификаторы;
- универсальный селектор.
Простые селекторы
Классы задаются элементам с помощью атрибута class=»имя_класса».
Например:<div class=»content»> Блок с основным контентом </div>
Главная и отличительная особенность классов в том, что один класс может быть присвоен нескольким тегам одновременно. Соответственно правила CSS будут применяться ко все элементам содержащим атрибут class с соответствующим значением.
Описание классов CSS:Все классы на CSS записываются в следующем виде:.content {width: 50%;color: green;}Теперь после того как мы присвоим элементу класс со значением контент, он будет иметь ширину 50% и цвет текста зеленый.<div class=»content»>Ширина 50% и цвет текста зеленый</div>
Как мы и говорили ранее классы можно назначать многим элементам веб-страницы. То есть, если у вас на одной странице будет несколько элементов с одним классом, то ошибкой это не будет.
Селекторы тегов правила написанные для селектора тега будут применяться ко всем одинаковым тегам на веб странице. В качестве самого селектора выступают названия тегов.
Например:p {color: green;}В данном случае ко всем тегам <P> будет применен стиль написанный выше. При таком написание правил не нужно добавлять дополнительные атрибуты. Правила применяются ко всем тегам имеющим заданное название.
Следует учитывать факт применения ко всем тегам правил. В основном данные селекторы используются для того чтобы задать всем тегам одни и те же правила. В основном это правила определяющие написание текста (шрифт, размер, цвет и тп.).
Идентификаторы в отличии от классов могут применяться только к одному объекту веб страницы. Присутствие на странице двух объектов с одним идентификатором не допустимо. Это вызовет ошибку компиляции кода. Присваивается идентификатор тегу с помощью атрибута id.
Вид идентификатора в HTML<p id=»content_plus»>Второго такого идентификатора быть не должно</p>
В коде CSS идентификаторы описываются следующим образом:
#content_plus {color: red;}
Идентификаторы используются довольно редко для описания стилей. В основном атрибут id для тега предназначен для работы со скриптами. Особенно активно используется в JavaScript.
Составные селекторы
К составным селекторам относятся простые селекторы, перечисленные через запятую. Применяются когда к нескольким объектам с различными классами необходимо применить один стиль оформления. Конечно можно изменить написание каждого правила, но это займет время и увеличит размер CSS. Следовательно увеличится время загрузки страницы.
Пример составного селектора:<div class=»content»> блок контента сайта </div><p class=»foot»> блок подвала сайта </p>Код CSS выглядит следующим образом:.content {color: red;}.foot {color: green;}.content, .foot {width: 100%;}
В данном случае у нас есть два разных элемента с разными классами. Каждый класс содержит определенный стиль оформления. Это цвет текста в основном блоке цвет красный, в подвале зеленый. появилась необходимость сделать эти элементы шириной 100%. Можно дописать еще по строчке к каждому классу, но как уже сказали, это увеличит объем работы и вес файла CSS. В нашем случае код очень маленький поэтому эта разница не особо заметна. Но представьте что у вас есть 1000 элементов, сотни классов и идентификаторов, 2000 строк кода. И вам потребовалось некоторые элементы изменить, например убрать или добавить отступ. Таких элементов может быть 20, 30 и больше. И тогда вам придется добавить не 2 строки а 20 или 30 строк. Кроме этого вам нужно найти все места где описаны нужные селекторы а это занимает время. В этом случае составные селекторы очень облегчают задачу верстальщику и сокращают время загрузки страницы.
Есть и еще вид составных селекторов. Например, необходимо добавить стиль оформления для определенных тегов содержащих определенный класс. Как говорили ранее, классы могут примененеы ко многим элементам веб страницы.
div.content {margin-top: 5 px;}Данный стиль оформления будет применен к тегам div с классом content.<div class=»content» > стиль будет применен </div><p class = «content»> Стиль применен не будет</p>
Сложные селекторы
В основном это несколько селекторов которые разделены комбинаторами. Комбинаторов может быть несколько: вложенности, дочерние, последовательные.
Например:div p {color: green;}Данный код CSS будет применен ко всем тегам <P> которые находятся внутри тега <DIV><div> <p> Стиль будет применен </p></div><p> <div> Стиль применен не будет </div> </p>
Это селектор вложенности. Вложенность может быть применена не только к селекторам тегов. Так же она работает и с классами, идентификаторами и тп.
Другой пример:div.content p.blok {width: 30 px;}В данном примере стиль будет применен для тега <p> которому присвоен класс blok, который в свою очередь находится в теге <div> которому присвоен класс content.<div class=»content»> <p class=»blok»>Стиль будет применен</p></div><div class=»foot»> <p class=»blok»>Стиль не будет применен</p></div>
Далее идет селектор на дочерние элементы. Данный селектор применяет стиль оформления строго к дочерним элементам. Очень похоже на вложенность только с одним отличием. Селектор вложенности применяет стиль ко всем вложенным элементам а этот строго к дочерним, исключая другие.
Например:div>p {color: yellow;}Данный стиль будет применяться к тегам <p> которые находятся только в теге <div>.<div> <p> Стиль будет применент</p> </div><div> <span> <p> Стиль не будет применен так как p — это дочерний элемент тега span </p></span></div>
И последние сложные селекторы это последовательные. Они применяют стили к элементам стоящим после каких либо других.
Например:div+p {width: 30px;}Стиль будет применен к тегу <p> идущему после тега <div><div> контент </div> <p>Стиль будет применен</p><div> контент </div><span>Информация</span> <p>Стиль не будет применен</p>
Это вся информация необходимая для начала изучения CSS. Стили могут применяться в различных вариантах. Количество настроек стилей очень разнообразно. Большинство описанных приемов и способов написания селекторов служит для облегчения работы верстальщику и оптимизации кода CSS. Оптимизированный код CSS очень сильно влияет на работу сайта. Стили CSS загружаются полность вместе с сайтом. Это означает что при большом весе и размере CSS файла загрузка всего сайта будет увеличена. Если сайт долго загружается это негативно сказывается на всем. На поведении пользователей, позиции в поиске и тп.