Селекторы

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

Селектор по тегу

Селектор по тегу определяет стиль всех элементов страницы, созданных определённым тегом. Например, для всех тегов <h1> или для всех тегов <p>. Для создания этого селектора указывается имя тега без скобок.

Для примера создадим страницу и добавим на неё заголовок. Стиль будем задавать через тег <style>. Укажем в нём стиль для заголовков первого уровня.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
<title>Селекторы</title>
<meta charset="utf-8">
<style>
h1 
  {
  font-size: 15px;
  color: Red;
  }
</style>
</head>
<body>
<h1>Стиль по тэгу</h1>
</body>
</html>

Если Вы всё сделали правильно то заголовок будет отображаться красным цветом и маленьким шрифтом. Вы можете добавить на страницу ещё тэги <h1> и увидите, что все они отображаются с тем же стилем.

Селектор по id

Любому тэгу можно установить атрибут id. Это идентификатор - уникальное имя элемента. На странице может быть только один элемент с конкретным id.

Добавим на страницу тэг <p> и установим ему атрибут id:

16	<p id="name">Стиль по id</p>

Для указания селектора по id ставится знак #, а затем без пробела значение id. Добавим внутрь тэга <style> такой код:

12
13
14
15

#name
  {
  color: Green;
  }

Абзац должен отображаться на странице зелёным цветом.

Селектор по классу

Любому тэгу можно установить атрибут class. Смысл этого атрибута примерно такй же, как у id. Отличие в том, что у нескольких элементов может быть одинаковый класс. И всем этим элементам можно указать определённый стиль.

Добавим на страницу список и зададим пунктам списка атрибут class:

21
22
23

<ol>
<li class="ls">Стиль по классу</li>
<li class="ls">Стиль по классу</li></ol>

Для указания селектора по классу ставится точка, затем без пробела значение атрибута class. Добавим внутрь тэга <style> такие строки:

16
17
18
19

.ls
  {
  color: Blue;
  }

Список должен отображаться синим цветом.

Один и тот же класс может быть у разных тегов. При этом, можно указать стиль не всем элементам класса, а только определённым тэгам. Для этого пишется сначала тэг, затем без пробела точка и класс. Такой селектор будет выглядеть так:

16
17
18
19

li.ls
  {
  color: Blue;
  }

Определённый элемент может относиться одновременно к нескольким классам. Для этого в атрибуте class все классы перечисляются через пробел. Пример:

28	<p class="registration inform">Текст</p>

Этот элемент будет относиться к двум классам. При этом, к нему будут применены и свойства класса registration, и свойства класса inform.

Универсальный селектор

Универсальный селектор устанавливает стиль для всех элементов. Он создаётся с помощью знака *

Для примера изменим шрифт всем элементам страницы. Добавим в стиль следующий код:

20
21
22
23

*
  {
  font-family: Verdana;
  }

Составной селектор

Часто нужно применять стиль к элементу, только если он находится внутри другого элемента. Для этого существует составной селектор, который состоит из нескольких селекторов. Селекторы перечисляются через пробел. Сначала указывается внешний элемент, а затем вложенный элемент, к которому применяется стиль.

Для примера установим стиль тэгам <span>, которые находятся внутри тэгов <p>. Добавим на страницу абзац с тэгом <span>, а также отдельный тэг <span>, к которому стиль не должен применяться.

33
34

<p>Начало <span>Выделенный текст</span> Продолжение</p>
<span>Текст без стиля</span>

Добавим в стиль такой код:

7
8
9
10

p span
  {
  color: #8D41BB;
  }

Первый тэг <span> изменил цвет, а второй остался неизменным, потому что он не находится внутри тэга <p>.

Составной селектор может состоять не только из тэгов, но и из любых других селекторов. Для примера установим стиль тэгу <span>, который находится внутри элемента определённого класса. Добавим на страницу блок и зададим ему класс:

39	<div class="div1">Начало <span>Выделенный текст</span> Продолжение</div>

Добавим в стиль такие строки:

11
12
13
14

.div1 span
  {
  color: #D41028;
  }

Установка стиля нескольким селекторам

Если нескольким селекторам нужно установить один и тот же стиль, то не обязательно указывать его каждому селектору по-отдельности. Можно перечислить селекторы через запятую и один раз указать им стиль. Это может быть применено к любым селекторам.

Пример:

15
16
17
18

p, div
  {
  font-size: 30px;
  }

Один и тот же селектор может быть указан в стиле несколько раз. Например, селекторы перечислены через запятую и им заданы определённые свойства. А затем, каждому селектору отдельно установлены остальные свойства.

Приоритет селекторов

Определённый элемент страницы может получать стили через разные селекторы. Например, одни свойства он получает через тег, а другие через класс. Но бывает и так, что какое-то свойство указано в обоих селекторах. А значения этому свойству заданы разные. Тогда возникает противоречие. В этом случае применяется значение из того селектора, у которого выше приоритет. Это распространённая ситуация, она не является ошибкой.

Приоритет селектора определяется специфичностью. Специфичность - это число, которое складывается по определённым правилам. Каждый тип простых селекторов имеет свою специфичность.

Селектор по тэгу имеет специфичность 1

Селектор по классу и псевдоклассу имеет специфичность 10

Селектор по id имеет специфичность 100

Например, если есть селекторы div и .inf, то будет использован стиль селектора .inf, потому что у него больше специфичность.

У сложных и составных селекторов специфичность складывается из специфичности простых селекторов, которые входят в их состав. Например:

Селектор #bl .inf специфичность 100+10=110

Селектор p.inf специфичность 1+10=11