Селекторы CSS

Селекторы CSS

Селекторы — это один из фундаментальных механизмов CSS. Именно они определяют то, к каким элементам будут применены стили, указанные в фигурных скобках. Селекторы нужны для именования групп стилевых параметров, чтобы их можно было назначить одному или нескольким элементам документа. Разберем пример правила CSS:

CSS


h3 {
    font-size: 1em; /* Размер шрифта */
    color: #5a5a5a; /* Цвет заголовка */
    text-align: center; /* Текст по центру */
}

Заголовок h3 — это селектор, в данном случае — это селектор элемента. Это CSS правило устанавливает стили, то есть CSS свойства, описанные в нём, для всех элементов h3 на странице.

Селектор находится вначале любого CSS-правила. Он указывает, к каким элементам применять объявления стилей. В примере селектор h3 – это тип элемента, говоря по-простому тег. Такой селектор означает что стили будут применены ко всем тегам h3 на странице. Существуют:

  • Селектор по элементу (тегу), например h3
  • Селектор по классу, перед ним ставится точка, например .title
  • Селектор по идентификатору (id), перед ним ставится решетка, например #content
  • Псевдоклассы и псевдоэлементы

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

Универсальный селектор (*) предназначен для выбора всех элементов.

Синтаксис: *

Пример задания правила для всех элементов на странице:

CSS


* {
  margin: 0;
  padding: 0;
}

Это правило установит для всех элементов нулевые внешние отступы.

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега. Он выберет все элементы на странице и задаст им указанные свойства. Пример правила для всех элементов p на странице:

CSS


p {
  padding: 20px;
}

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

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

HTML


<h3 class="title">Lorem ipsum</h3>
<p class="title">Aliquam erat volutpat</p>

CSS


.title {
    color: #dc143c;
}
Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id), то есть для выбора одного конкретного элемента на странице. В элементах идентификаторы задаются при помощи атрибута id, например:

HTML


<div id="content">Lorem ipsum</div>

CSS


#content {
  width: 100%;
  height: 50px;
  text-align: center;
}
CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению. Существует несколько типов селекторов по атрибуту:

  • [attr] – по имени атрибута;
  • [attr=value] – по имени и значению атрибута;
  • [attr^=value] – по имени и значению, с которого оно должно начинаться;
  • [attr|=value] – по имени атрибута и его значению, которое равно value или начинается с value;
  • [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
  • [attr*=value] – по указанному атрибуту и значению, которое должно содержать value;
  • [attr~=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.
На данном примере, всем элементам с атрибутом target, будет задан оранжевый цвет текста.

Пример [attr]

Lorem Ipsum

HTML


<a href="https://stylecss.ru/" target="_blank">Lorem Ipsum</a>

CSS


[target] {
  color: #ffa500;
}
By julia