Селекторы классов

Классы CSS являются одним из основных составляющих стандарта CSS и придают ему дополнительную гибкость. Еще их называют селекторами классов CSS.

Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Можно задавать стиль для всех элементов или сократить выбор с помощью определённого селектора. В предыдущей лекции мы рассмотрели задание стилей документа HTML с помощью селектора тега. Теперь рассмотрим более гибкий способ определения стиля с помощью селектора класса и селектора идентификатора.

Селекторы классов CSS позволяют присваивать правила стиля только некоторым экземплярам того или иного HTML-элемента с помощью добавления в тег атрибута class. В отличие от селекторов тега, имена которых предопределены (например, <p>, <h1>, <img>, ...), имена классов придумываются при их создании.

<p class="red-text">Текст в этом абзаце будет иметь особое форматирование.</p> 

CSS-правило для селектора классов записывается так же, как и для селектора тегов, только в начале имени селектора класса идет точка:

.red-text {
  color: red;
}

Имя класса может содержать в себе латинские символы, цифры, символ дефиса (-) и подчёркивания (_) и начинаться оно должно с латинского символа. Использование пробелов и русских букв в именах классов недопустимо.

Одному классу может принадлежать множество html-элементов. Например:

<h2 class="red-text">Заголовок красного цвета</h2>
<p class="red-text">Текст в этом абзаце красного цвета.</p>

Класс с привязкой к элементу

Если необходимо ограничить применимость класса только к одному типу элементов, а не к любому, то в css-правиле перед точкой следует указать этот элемент. Например:

p.red-text {
  color: red; // Покрасит красным цветом только текст абзаца и не затронет заголовок.
}

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

При задании стиля элементу можно использовать объединение классов, т.е. применить к элементу оформление, описанное в разных классах. Чтобы применить к тегу несколько классов, достаточно указать названия классов в атрибуте class через пробел.

.bold { font-weight: bold; }
.kursiv { font-style: italic; }
.blue { color: blue; }
.green { color: green; }

<p class="bold blue">Жирный текст синего цвета.</p>
<p class="kursiv bold">Жирный курсивный шрифт текста.</p>
<p class="bold green blue">Жирный текст зеленого цвета.</p>

Если в разных классах есть одно и тоже свойство, тогда при их объединении будет применено значение свойства того класса, который находится ниже в файле стилей.

Иногда возникает необходимость в объединении класса с другим классом или другим селектором (например, тега), либо то и другое одновременно, чтобы сузить рамки выборки элементов. Для этого все селекторы указываются подряд без пробела, в этом случае стили будут применены только к тем элементам, которые соответствуют сразу всем этим селекторам.

.kursiv.bold { text-decoration: underline; } // Подчеркнет текст во втором параграфе

Селекторы идентификаторов

Теперь перейдем к идентификаторам. Их применение похоже на то, как это происходит с классами. Однако вместо html-атрибута class используется атрибут id, при этом в правиле CSS селектор с идентификатором записывается через решетку.

#special {
    font-size: 22px;
    color: Red;
}

<p>Обычный абзац, заданный по умолчанию</p>
<p id="special">Особенный абзац</p>

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

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

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

<a id="main-link" class="link" href="https://weblecture.ru">Очень важная ссылка</a>

.link {
  color: green;
}
 
#main-link {
  font-weight: bold;
  color: red;
}

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

Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор, который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:

* {      
    color: blue;
}

Его использование имеет смысл при обращении к вложенным элементам HTML страницы.

Селекторы потомков

Веб-страница обычно имеет сложную организацию: одни элементы внутри себя могут определять другие элементы. Вложенные элементы иначе можно назвать потомками. А контейнер этих элементов - родителем.

Например, элемент body в представленном ниже коде имеет следующее содержимое:

<body class="content">
    <h2>Заголовок</h2>
    <div class="article">
        <p class="paragraph">Текст</p>
    </div>
</body>

Внутри элемента body определено три вложенных элемента: h2, div, p. Все эти элемены являются потомками элемента body.

А внутри элемента div определен только один вложенный элемент - p, поэтому элемент div имеет только одного потомка.

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

.article p { color: green;}

или

.article .paragraph { color: green;}

или

body .article * { color: green;}

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

Селекторы псевдоклассов

В дополнение к селекторам тегов, классов и идентификаторов существуют еще селекторы псевдоклассов, которые несут дополнительные возможности по выбору нужных элементов.

Список доступных псевдоклассов:

• :root - позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной веб-странице корневым элементом практически всегда является элемент <html>
• :link - применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход
• :visited - применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил
• :active - применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход
• :hover - представляет элемент, на который пользователь навел указатель мыши. Применяется преимущественно к ссылкам, однако может также применяться и к другим элементам, например, к параграфам
• :focus - представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или нажимает кнопкой мыши на поле ввода (например, текстовое поле)
• :not - позволяет исключить элементы из списка элементов, к которым применяется стиль
• :lang - стилизует элементы на основании значения атрибута lang
• :empty - выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми

При применении псевдоклассов перед ними всегда ставится двоеточие.

Например, стилизуем ссылки, используя псевдоклассы:

a:link    {color:blue; text-decoration:none}
a:visited {color:pink; text-decoration:none}
a:hover   {color:red; text-decoration:underline}
a:active  {color:yellow; text-decoration:underline}