На этом уроке мы изучим основные виды селекторов, и научимся их использовать на практике.

Что такое CSS селекторы?

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

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

/*
селектор {
  свойство: значение;
  свойство: значение;
}
*/

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

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

Типы CSS селекторов

Существует несколько различных видов селекторов.

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

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

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

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

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

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

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

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

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

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

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

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

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

Синтаксис: *

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

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

5. Группировка селекторов. Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.

Синтаксис: селектор1, селектор2, ...

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

/* селектор h3, h4 выберет все элементы на странице, имеющих тег h3 и h4 */
h3, h4 {
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 10px;
}

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

Синтаксис: [атрибут] [атрибут=значение] [атрибут^=значение] [атрибут|=значение] [атрибут$=значение] [атрибут*=значение] [атрибут~=значение]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Список псведоклассов: :link :visited :active :hover :focus :lang() :first-child :first-of-type :only-child :only-of-type :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) :root :empty :target :enabled :disabled :checked :not(selector) :last-child :last-of-type

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

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

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

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

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

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

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

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

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

Псевдокласс :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 на клавиатуре.

Пример задания CSS правила для элемента input[type="text"] при нахождении его в фокусе:

/* селектор input[type="text"] найдет элемент input с атрибутом type="text" при нахождении его в фокусе */
input[type="text"]:focus {
  background-color: #ffe082;
}

Псевдокласс :first-child. Псевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя.

Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:

/* селектор li:first-child выберет элементы li, которые являются первыми элементами своего родителя */
li:first-child {
  font-weight: bold;
}

Псевдокласс :last-child. Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.

Пример задания CSS правила для элементов .alert-warning, которые являются последними дочерними элементами своего родителя:

/* селектор .alert-warning:last-child выберет элементы .alert-warning которые являются последними элементами своего родителя */
.alert-warning:last-child {
  font-weight: bold;
}

Псевдокласс :nth-child(выражение). Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even. Отсчёт элементов в родителе начинается с 1.

Например:

/* селектор .li:nth-child(2) выберет элементы li, которые явлются вторыми элементами своего родителя */
.li:nth-child(2) { ... }
/* селектор .li:nth-child(odd) выберет элементы li, которые явлются нечётными элементами (1, 3, 5, ...) своего родителя */
.li:nth-child(odd) { ... }
/* селектор .li:nth-child(even) выберет элементы li, которые явлются чётными элементами (2, 4, 6, ...) своего родителя */
.li:nth-child(even) { ... }
/* селектор .li:nth-child(2n+1) выберет элементы li, которые имеют порядковые номера 1, 3, 5, 7, ... внутри своего родителя */
.li:nth-child(2n+1) { ... }

Формула имеет следующую запись: An + B. A и B - это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 ...).

Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, ...). Т.е. 3 * 0 + 2, 3 * 1 + 2, 3 * 2 + 2, ...

А например, формула вида 5n будет определять элементы с порядковыми номерами (0, 5, 10, ...). Т.е. 5 * 0, 5 * 1, 5 * 2, ...

Псевдокласс :nth-last-child(выражение). Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even

Псевдокласс :not(селектор). Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.

Например:

/* Селектор .aside > div:not(:first-child) выберет все элементы div кроме первого непосредственно расположенные в .aside */
.aside > div:not(:first-child) { ... }

В качестве селектора можно указывать селекторы по тегам, классам, атрибутам, использовать псевдоклассы, т.е. всё кроме псведокласса :not(), несколько сгруппированных селекторов, псевдоэлементы, дочерние и вложенные селекторы:

/* такие конструкция работать не будет */
:not(:not(...)) { ... }
div:not(.alert.alert-warning) { ... }
.item:not(::before) { ... }
.slider .slider__item:not(.active img) { ... }
td:not(.row + td) { ... }

При необходимости можно использовать несколько псевдоклассов :not().

Например:

/* применим стили ко всем элементам div, расположенных непосредственно в .message, за исключением .alert-warning и .alert-danger */
.message > div:not(.alert-warning):not(.alert-danger) { ... }

Селектор :nth-of-type(n)

Псевдокласс :nth-of-type(n) применяется для выбора указанных элементов, если они являются n-ыми дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :nth-child(n), псевдокласс :nth-of-type(n) учитывает только элементы с указанным тегом. Кроме этого, данный псевдокласс :nth-of-type(n) также позволяет использовать ключевые слова odd, even и формулу an+b.
Например, выбрать каждый элемент <p>, который является вторым дочерним элементом данного типа своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>
  <div>
    <p>...</p>
    <p>...</p>  <=
  </div>
</div>
<div>
  <p>...</p>
  <h3>...</h3>
</div>

CSS:
p:nth-of-type(2) {
    background-color: green;
}

Селектор :nth-last-of-type(n)

Псевдокласс :nth-last-of-type(n) аналогичен классу :nth-of-type(n) с разницей в том, что отсчёт дочерних элементов данного типа (тега) ведётся с конца.

Селектор :root

Псевдокласс :root предназначен для выбора корневого элемента HTML документа, т.е. элемента <html>. В отличие от селектора html {...} данный псевдокласс имеет более высокий приоритет:
Например, установить желтый цвет фона страницы.
CSS:
/*Из-за того, что псевдокласс :root имеет более высокий приоритет, цвет заднего фона документа HTML будет жёлтым.*/
:root {background-color: yellow;}
html {  background-color: green;}

Селектор :first-of-type

Псевдокласс :first-of-type применяется для выбора указанных элементов, если они являются первыми дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :first-child, данный псевдокласс :first-of-type учитывает только элементы с указанным тегом.
Например, выбрать каждый элемент <p>, который является первым дочерним элементом данного типа своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>    <=
  <div>
    <p>…</p>    <=
    <p>...</p>
  </div>
</div>
<div>
  <p>...</p>    <=
  <h3>...</h3>
</div>

CSS:
p:first-of-type {
    background-color: green;
}

Селектор :last-of-type

Псевдокласс :last-of-type применяется для выбора указанных элементов, если они являются последними дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :last-child, данный псевдокласс :last-of-type учитывает только элементы с указанным тегом.
Например, выбрать каждый элемент <p>, который является последним дочерним элементом данного типа своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>    <=
  <div>
    <p>…</p>
    <p>...</p>  <=
  </div>
</div>
<div>
  <p>...</p>    <=
  <h3>...</h3>
</div>

CSS:
p:last-of-type {
    background-color: green;
}

Селектор :only-child

Псевдокласс :only-child применяется для выбора указанных элементов, если они являются единственными дочерними элементами своего родителя.
Например, выбрать каждый элемент <p>, который является единственным дочерним элементом своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>
  <div>
    <p>…</p>    <=
  </div>
</div>
<div>
  <p>...</p>
  <p>...</p>
  <h3>...</h3>
</div>

CSS:
p:only-child {
    background-color: yellow;
}

Селектор :only-of-type

Псевдокласс :only-of-type применяется для выбора указанных элементов, если они являются единственными дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :only-child, данный псевдокласс :only-of-type учитывает только элементы с указанным тегом.
Например, выбрать каждый элемент <p>, который является единственным дочерним элементом данного типа своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>    <=
  <div>
    <p>…</p>    <=
  </div>
</div>
<div>
  <p>...</p>
  <p>...</p>
  <h3>...</h3>
</div>

CSS:
p:only-of-type {
    background-color: yellow;
}

Селектор :empty

Псевдокласс :empty предназначен для выбора пустых элементов, т.е. элементов, которые не содержат другие элементы или какой-либо текст.
Например, установить красный цвет фона и размер для пустых элементов <p>.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>Заголовок</h1>
  <p></p>       <=
  <p>Текст</p>
  <p><span></span></p>
</div>

CSS:
p:empty {
    width: 50px;
    height: 10px;
    background-color: red;
}

Селектор :target

Псевдокласс :target предназначен для выбора элемента с идентификатором (например: part1), который указан в URL после символа #.
Например, установить красный цвет текста и размер шрифта для элемента идентификатор которого указан в URL после символа #.
HTML:
<p id="part1">...</p>
<p id="part2">...</p>

CSS:
:target {
  color: red;
  font-size: 24px;
}
Если URL страницы "http://test.org/article#part1", то будет выбран элемент <p>, имеющий идентификатор id="part1". Если URL страницы "http://test.org/article#part2", то будет выбран элемент <p>, имеющий идентификатор id="part2".

Селектор :enabled

Псевдокласс :enabled предназначен для выбора элементов формы, которые доступны для управления, т.е. они могут отвечать на действия пользователей.
Например, установить желтый цвет фона для элементов <input>, которые доступны для управления.
HTML:
<input type="text" value="Введите ФИО:">

CSS:
input:enabled {
  background-color: yellow;
}

Селектор :disabled

Псевдокласс :disabled предназначен для выбора элементов формы, которые недоступны для управления, т.е. они не могут отвечать на действия пользователей.
Например, установить желтый цвет фона для элементов <input>, которые не доступны для управления.
HTML:
<input type="text" disabled="disabled" value="Введите возраст:">

CSS:
input:disabled {
  background-color: yellow;
}

Селектор :checked

Псевдокласс :checked предназначен для выбора элементов radio (<input type="radio">), checkbox (<input type="checkbox">) и option, которые находятся во включенном положении.
Например, выбрать элементы, которые находятся во включенном положении, т.е. checked.
HTML:
<input type="checkbox" checked="checked" value="Yes">

CSS:
:checked {
  height: 30px;
  width: 30px;
}