Селекторы CSS — виды селекторов

Селекторы CSS — это часть правила 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

К составным селекторам CSS относятся простые селекторы, перечисленные через запятую. Применяются когда к нескольким объектам с различными классами необходимо применить один стиль оформления. Конечно можно изменить написание каждого правила, но это займет время и увеличит размер CSS. Следовательно увеличится время загрузки страницы.

Пример составного селектора 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>

Далее идет селектор на дочерние элементы. Данный селектор CSS применяет стиль оформления строго к дочерним элементам. Очень похоже на вложенность только с одним отличием. Селектор вложенности применяет стиль ко всем вложенным элементам а этот строго к дочерним, исключая другие.

Например:

div>p {

color: yellow;

}

Данный стиль будет применяться к тегам <p> которые находятся только в теге <div>.

<div> <p> Стиль будет применент</p> </div>

<div> <span> <p> Стиль не будет применен так как p — это дочерний элемент тега span </p></span></div>

И последние, сложные селекторы CSS это последовательные. Они применяют стили к элементам стоящим после каких либо других.

Например:

div+p {

width: 30px;

}

Стиль будет применен к тегу <p> идущему после тега <div>

<div> контент </div> <p>Стиль будет применен</p>

<div> контент </div><span>Информация</span> <p>Стиль не будет применен</p>

Это вся информация необходимая для начала изучения CSS. Стили могут применяться в различных вариантах. Количество настроек стилей очень разнообразно. Большинство описанных приемов и способов написания селекторов служит для облегчения работы верстальщику и оптимизации кода CSS.

Оптимизированный код CSS очень сильно влияет на работу сайта. Стили CSS загружаются полностью вместе с сайтом. Это означает что при большом весе и размере CSS файла загрузка всего сайта будет увеличена. Если сайт долго загружается это негативно сказывается на всем. На поведении пользователей, позиции в поиске и т.п.

Источник: webdevtips.ru

Читайте так-же о том, как увеличить изображение при наведении курсора в CSS