Селекторы CSS. Виды, группировка и специфичность - Такси №1
Разное 

Селекторы CSS. Виды, группировка и специфичность

avtor

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

Пример CSS правила:

p {
  text-align: center;
  font-size: 20px;
}

В этом CSS правиле, p — это селектор, в данном случае — это селектор элемента. Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.

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

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

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

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

Селектор по элементу предназначен для выбора элементов по имени тега.

Синтаксис: имяТега

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

/* селектор p выберет все элементы p на странице */
p {
  padding-bottom: 15px;
}

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

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

Синтаксис: .имяКласса

Пример задания правила для всех элементов, имеющих класс center:

/* селектор .center выберет все элементы, имеющие класс center */
.center {
  text-align: center;
}

Селектор по идентификатору (id)

selector по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id).

Синтаксис: #имяИдентификатора

Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer:

/* селектор #footer выберет элемент, имеющий идентификатор footer */
#footer {
  height: 50px;
  margin-top: 20px;
}

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

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

Синтаксис: *

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

/* селектор * выберет все элементы на странице */
* {
  margin: 0;
  padding: 0;
}

CSS селекторы по атрибуту

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

Типы селекторов по атрибуту:

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

[attr]

Пример задания правила для всех элементов на странице, имеющих атрибут target:

/* селектор [target] выберет все элементы на странице, имеющих атрибут target */
[target] {
  background-color: red;
}

[attr=value]

Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow:

/* селектор [rel="nofollow"] выберет все элементы на странице, имеющих атрибут rel со значением nofollow */
[rel="nofollow"] {
  background-color: green;
}

[attr^=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого начинается с col:

/* селектор [class^="col"] выберет все элементы на странице, имеющих атрибут class, значение которого начинается с col */
[class^="col"] {
  background-color: yellow;
}

[attr|=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):

/* селектор [class|="test"] выберет все элементы на странице, имеющих атрибут class, значение которого равно test или начинается с test- */
[class|="test"] {
  background-color: orange;
}

[attr$=value]

Пример задания правила для всех элементов на странице, имеющих атрибут class, значение которого заканчивается на color:

/* селектор [class$="color"] выберет все элементы на странице, имеющих атрибут class, значение которого заканчивается на color */
[class$="color"] {
  background-color: yellow;
}

[attr*=value]

Пример задания правила для всех элементов на странице, имеющих атрибут href, значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://youtu.be/TEOSuiNfUMA):

/* селектор [href*="youtu.be"] выберет все элементы на странице, имеющих атрибут href, значение которого содержит youtu.be */
[href*="youtu.be"] {
  background-color: green;
}

[attr~=value]

Пример задания правила для всех элементов на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football):

/* селектор [data-content~="news"] выберет все элементы на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела */
[data-content~="news"] {
  background-color: brown;
}

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

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

Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа :, т.е. так селектор:псевдокласс.

Псевдоклассы для выбора элементов в зависимости от их состояния

К этой группе псевдоклассов можно отнести псевдоклассы: :link, :visited, :hover, :active и :focus.

Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href).

Псевдоклассы :hover, :active и :focus могут применяться не только к ссылкам, но и к другим элементам.

Псевдокласс :link предназначен для выбора не посещённых ссылок.

Пример задания правила для всех элементов a с классом external, которые пользователь ещё не посетил:

/* селектор a.external:link выберет все элементы a с классом external пользователь по которым ещё не переходил */
a.external:link {
  color: red;
}

Псевдокласс :visited

Псевдокласс :visited предназначен для выбора посещённых ссылок.

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

/* селектор .side a:visited выберет все элементы a, находящиеся в .aside, пользователь которые уже посетил */
.aside a:visited {
  color: #000;
}

Псевдокласс :active

Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок (a) и кнопок (button), но может также использоваться и для других элементов.

Пример задания CSS правила для всех элементов a когда они активируются пользователем:

/* селектор a:active выберет все элементы a, находящиеся в активном состоянии */
a:active {
  background-color: yellow;
}

Псевдокласс :hover

Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).

Пример задания CSS правила для всех элементов .btn-warning при поднесении к ним курсора:

/* селектор .btn-warning:hover выберет все элементы .btn-warning при поднесении к ним курсора */
.btn-warning:hover {
  color: #fff;
  background-color: #ff8f00;
}

При задании CSS-правил для ссылок с использованием псведоклассов :link, :visited, :hover и :active, их следует распологать в следеующем порядке:

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

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

Псевдокласс :focus

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