Селекторы CSS

Поскольку мы не хотим стилизовать все наши элементы HTML одновременно, нам требуется возможность выбрать подмножество этих элементов.

Селекторы CSS определяют, к каким элементам мы хотим применить стиль.

Базовые селекторы тегов

Нацелиться на базовые теги HTML легко: просто используйте имя тега.

a { /* Ссылки */ }
p { /* Абзацы */ }
ul { /* Неупорядоченные списки */ }
li { /* Пункты списка */ }

Есть прямая связь между именем тега HTML и используемым селектором CSS.

Классы

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

Из всех атрибутов HTML атрибут class является наиболее важным для CSS. Он позволяет определить группу элементов HTML, на которые мы можем точно нацелиться. Просто поставьте точку перед именем класса который вы хотите использовать:

.date {
  color: red;
}

С другой стороны есть атрибут HTML class со значением date. Он должен совпадать с именем класса CSS.

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

Селектор класса .date будет нацелен на все элементы HTML с атрибутом class=”date”. Таким образом, следующие элементы HTML все будут стилизованы:

<p class="date">
  21 февраля, суббота
</p>
<p>
  Мероприятие произойдёт в <em class="date">субботу</em>.
</p>

Имейте в виду, что имя тега не важно, учитывается только атрибут class.

Идентификаторы

Можно также использовать атрибут id в вашем HTML и определить его в вашем CSS с помощью решётки:

CSS

#tagline{ color: orange;}

HTML

<h1 id="tagline">Этот заголовок будет оранжевым.</h1>

Идентификаторы похожи на классы, так как они тоже основаны на атрибуте HTML.

Пример

HTML	Возможные селекторы	Что это значит
<p></p>	p	Каждый <p>
<div class=”global”></div>	div .global div.global	Каждый <div> Каждый элемент с class=”global” Каждый <div> с class=”global”
<ul id=”menu”>	#menu ul#menu	Только элемент с id=”menu” Только элемент <ul> с id=”menu”
<ol class=”dico”> <li>Un cobaye</li> <li>Des cobaux</li> </ol>	li ol li .dico li	Каждый <li> Каждый <li> внутри предка <ol> Каждый <li> внутри предка с class=”dico”

Объединение селекторов

Давайте воспользуемся нашим предыдущим примером, в котором мы хотим сделать наши даты красными:

<p class="date">
  21 февраля, суббота
</p>
<p>
  Мероприятие произойдёт в <em class="date">субботу</em>.
</p>

Если мы захотим вместо этого, чтобы наши даты внутри <em> отображались синим цветом? Мы можем добавить следующее правило CSS:

em.date {
  color: blue;
}

em.date объединяет в себе:

• селектор тега em;
• селектор класса .date.

Он будет применяться только к элементам <em class=”date”></em>. Это не повлияет на другие .date или <em>.

Иерархия селекторов

Пробел в селекторе определяет отношение предок/потомок. Скажем, мы хотим, чтобы ссылки в нашем заголовке были красного цвета:

header a {
  color: red;
}

Это можно читать справа налево как: «выбрать все элементы <a>, которые находятся внутри элемента <header>». Это заставит все другие ссылки (которые не в заголовке) оставаться неизменными.

Псевдоклассы

Элементы HTML могут иметь разные состояния. Наиболее распространённый случай — когда вы наводите курсор на ссылку. В CSS возможно применить другой стиль, когда происходит такое событие.

Псевдоклассы привязаны к обычным селекторам и начинаются с двоеточия:

a {
  color: blue;
}
  
a:hover {
  color: red;
}