Шпаргалка по часто используемым CSS селекторам

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

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

Простые CSS селекторы

Селекторы позволяют нацеливаться и выбирать определённые части HTML документа для стилизации.

Простые CSS селекторы напрямую выбирают один или несколько элементов:

• С помощью универсального селектора *.
• На основе имени/типа элемента.
• На основе значения класса элемента.
• На основе значения идентификатора элемента.

Изучив, как работают самые просты селекторы, вы сможете понять, как использовать более сложные. Простые CSS селекторы чаще всего используются.

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

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

* {
    property: value;
}

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

* {
    padding: 0;
    margin:  0;
}

CSS селектор типа

Селектор типа выбирает все HTML элементы указанного типа. Для его использования, укажите имя элемента. Например, если вы хотите применить стиль к каждому параграфу HTML-элемента, вы должны указать элемент p:

p {
    property: value;
}

Приведённый выше код сопоставит и выберет все элементы p в документе, и стилизует их.

CSS селектор класса

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

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

Классы можно использовать повторно, что делает их хорошим вариантом практики DRY-разработки. DRY — это принцип разработки, сокращение от 'Don't Repeat Yourself (Не повторяйся). Как следует из названия, цель состоит в том, чтобы по возможности избегать написания повторяющегося кода.

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

.my_class {
    property: value;
}

В приведённом выше коде элементы с классом my_class выбираются и оформляются соответствующим образом.

CSS селектор идентификатора

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

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

Чтобы выбрать элемент с определённым идентификатором, используйте символ #, за которым следует имя идентификатора:

#my_id {
    property: value;
}

Приведённый выше код будет соответствовать только уникальному элементу со значением идентификатора my_id.

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

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

У многих HTML элементов есть атрибуты.

HTML атрибуты:

• Предоставляют дополнительную информацию об HTML элементах.
• Всегда указываются в начальном (или открывающемся теге).
• Обычно используются пары имя/значение, такие как имя='значение'.
• Значение в паре имя/значение должно быть заключено в кавычки.

Одним из самых популярных HTML атрибутов, с которым, вы возможно, сталкивались, является атрибут href, который добавляется к открывающему тегу <a>и указывает URL-адрес, на который ссылается тег <a>:

<a href="https://www.freecodecamp.org/">The best place to learn to code for free!</a>

Значение href представляет собой URL https://www.freecodecamp.org/, на которой перейдёт пользователь кликнув на текст ссылки The best place to learn to code for free!

Селектор атрибутов сопоставляет и выбирает HTML элементы на основе наличия значения атрибута. Существуют различные типы селекторов атрибутов. Ниже приведены некоторые из наиболее распространённых селекторов атрибутов.

Селектор атрибута [attribute]

Для использования CSS селектора атрибутов, используйте пару квадратных скобок [] для выбора нужного атрибута. Общий синтаксис для селекторов атрибутов следующий:

element[attribute]

Этот селектор выбирает элемент, если атрибут attribute существует. В следующем примере выбираются элементы, имеющие атрибут attr, независимо от конкретного значения атрибута:

a[attr] {
    property: value;
}

В приведённом выше примере выбираются элементы a с именем атрибута attr независимо от значения attr.

С учётом сказанного, вы можете быть более конкретным в своём стиле.

Селектор атрибута [attribute="value"]

Используя следующий синтаксис, вы можете указать значение атрибута:

element[attribute="value"]

Итак, если вы хотите стилизовать элементы a с атрибутом attr, который имеет точное значение равное 1, вы должны сделать следующее:

a[attr="1"] {
    property: value;
}

Селектор атрибута [attribute^="value"]

Вы также можете указать, что значение атрибута начинается с определённых символов, используя следующий синтаксис:

element[attribute^="value"]

Например, если вы хотите выбрать и стилизовать любые элементы a, у которых есть атрибут attr со значением начинающимся с www, вы должны сделать следующее:

a[attr^="www"] {
    property: value;
}

Селектор атрибута [attribute$="value"]

Вы также можете указать, что значение атрибута заканчивается определённым символом, используя следующий синтаксис:

element[attribute$="value"]

Например, если вы хотите выбрать элементы a с именем атрибута attr со значением оканчивающимся на .com, вы должны сделать следующее:

a[attr$=".com"] {
    property: value;
}

Селектор атрибута [attribute*="value"]

Вы также можете указать, что значение атрибута содержит определённую подстроку — этот селектор известен как CSS селектор атрибута содержащего подстроку и имеет следующий синтаксис:

element[attribute*="value"]

В этом случае строковое значение должно присутствовать в значении атрибута, за которым следует любое количество других символов — значение необязательно должно быть целым словом. Например, если вы хотите выбрать элементы a, у которых есть атрибут attr со значением, содержащим строку free, вы должны сделать следующее:

a[attr*="free"] {
    property:value;
}

Приведённый выше код выбирает элемента a с именем атрибута attr, когда в значении атрибута присутствует строка free — даже в виде подстроки (подстрока — это слово внутри другого).

Селектор атрибута [attribute~="value"]

Также вы можете указать, что селектор соответствует значению атрибута, содержащему целое слово, используя следующий синтаксис:

element[attribute~= "value"]

В этом случае строковое должно быть целым словом.

Например, если вы хотите выбрать элементы a, у которых есть имя атрибута attr со значением, содержащим слово free, вы можете сделать следующее:

a[attr~= "free"] {
    property: value;
}

Код не будет выделять элементы со значением атрибута freeCodeCamp или freediving, как это было в предыдущем примере, потому что free должно быть целым словом, а не подстрокой. Атрибут attr должен содержать слово free отделённое от других символов пробельными символами.

Группирование CSS селекторов

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

Например, вот так можно настроить таргетинг на несколько элементов, div, p и span, и применить к каждому из них одни и те же стили:

div, p, span {
    property: value;
}

Этот код находит в HTML документе все элементы div, p и span и присваивает им один и тот же стиль.

Комбинаторы CSS селекторов

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

Существует четыре типа комбинаторов:

• Комбинатор потомков пробел.
• Прямой дочерний комбинатор >.
• Общий родственный комбинатор ~.
• Соседний родственный комбинатор +.

Комбинатор потомков

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

По сути, вы сначала упоминаете родительский HTML элемент, ставите пробел, а затем упоминаете потомка первого элемента, который является дочерним элементом. Дочерний HTML элемент — это элемент внутри родительского HTML элемента.

В качестве примера возьмём следующее:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>
  <div>
    <h2>I am level 2 heading</h2>
    <p>I am a paragraph inside a div</p>
    <span>I am a span</span>
    <p>I am a paragraph inside a div</p>
  </div>
  <p>I am a paragraph outside a div</p>
</body>
</html>

В приведённом выше примере HTML документа div является родительским элементом, а h2, span, и два p — дочерними элементами, поскольку они находятся внутри div. Существует также p вне div.

Если вы хотите стилизовать только те p, которые находятся внутри div, вот что вы должны сделать:

div p {
    property: style;
}

В приведённом выше примере стилизуются только два p с текстом I am a paragraph inside a div внутри блока div. Два других дочерних элемента и абзац вне div с текстом I am a paragraph outside a div не стилизуются.

Прямой дочерний комбинатор

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

В качестве примера возьмём следующий HTML документ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>
  <div>
    <a href="#">I am a link</a>
    <a href="#">I am a link</a>
    <p><a href="#">I am a link inside a paragraph</a></p>
  </div>
</body>
</html>

У нас есть div являющийся родительским элементом. Внутри родительского HTML элемента есть два элемента a являющиеся прямыми дочерними элементами элемента div.

Также есть ещё один элемент a внутри элемента p. Элемент p является дочерним элементом div, но элемент a внутри параграфа p не является прямым дочерним элементом div.

Итак, чтобы получить доступ только к элементам a, которые являются прямыми дочерними элементами div, вы должны сделать следующее:

div > a  {
    property: value;
}

Приведённый выше код выбирает элементы a, непосредственно вложенные в div и являющиеся его непосредственными дочерними элементами.

Общий родственный комбинатор

Общий родственный комбинатор выбирает родственные элементы.

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

Чтобы использовать общий комбинатор родственных элементов, укажите первый элемент, затем используйте символ ~, за которым следует второй элемент.

В качестве примера возьмём следующее:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>
  <div>
    <p>I am paragraph inside a div</p>
  </div>
  <p>I am a paragraph outside a div</p>
  <h3>I am a level three heading</h3>
  <p>I am a paragraph outside a div</p>
</body>
</html>

Внутри элемента div есть вложенный элемент p. Этот конкретный элемент p является дочерним элементом div. Также есть два параграфа с текстом I am a paragraph outside a div и элемент h3. Все эти три элемента (p, h3 и p) являются родственными элементами элемента div (находятся с ним на одном уровне вложенности).

Чтобы выбрать элемента p являющиеся родственными элементу div, вы должны сделать следующее:

div ~ p {
    property: value;
}

Приведённый выше код стилизует оба элемента p, идущие после div. Он стилизует даже элемент p, который не следует непосредственно за элементом div, например, элемент p следующий за элементом h3. Это происходит потому, что он всё ещё идёт после div.

Соседний родственный комбинатор

Соседний родственный комбинатор является более конкретным, чем общий родственный комбинатор. Этот селектор соответствует только непосредственным родственным элементам. Непосредственные родственные элементы — это HTML элементы идущие сразу за первым элементом.

Чтобы использовать комбинатор соседних родственных элементов, укажите первый HML элемент, затем добавьте символ плюс + за которым следует элемент, который вы хотите выбрать следующий непосредственно за первым элементом.

Вернёмся к примеру из предыдущего раздела:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>
  <div>
    <p>I am paragraph inside a div</p>
  </div>
  <p>I am a paragraph outside a div</p>
  <h3>I am a level three heading</h3>
  <p>I am a paragraph outside a div</p>
</body>
</html>

Хотя HTML элемент p следующий за элементом h3, является родственным элементом элемента div, он не является непосредственно родственным элементом, как элемент p стоящий пред h3.

Таким образом, чтобы настроить таргетинг только на HTML элемент p идущий сразу за div, вы должны сделать следующее:

div + p {
    property: value;
}

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

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

• На элемент наведён указатель мыши :hover.
• Элемент является первым элементом своего типа :first-of-type.
• Ссылка была ранее посещена из этого браузера :visited.
• Ссылка ранее не посещалась в этом браузере :link.
• Чекбокс/радио кнопка отмечена/установлена :checked

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

Общий синтаксис выглядит примерно так:

element:имя-псевдокласса {
    property: value;
}

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

Существуют CSS селекторы, основанные на информации о состоянии ссылки.

Селектор :link применяет стиль, когда элемент ранее не посещался:

a:link {
    property: value;
}

Селектор :visited применяется, когда элемент ранее посещался в текущем браузере:

a:visited {
    property: value;
}

Селектор :hover применяется, когда указатель мыши находится над элементом:

a:hover {
    property: value;
}

Селектор :focus применяется, когда пользователь при помощи кнопки Tab переместил фокус на элемент:

a:focus {
    property:value;
}

Селектор :active применяется, когда элемент выбран после нажатия и удержания кнопки мыши:

a:active {
    property: value;
}

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

Селектор :focus, который вы видели ранее для ссылок, также используется для input:

input:focus {
    property: value;
}

Селектор :required выбирает поля обязательные к заполнению, input с атрибутом required.

input:required {
    property: value;
}

Селектор :checked выбирает отмеченные поля типа checkbox или radio:

input:checked {
    property:value;
}

Селектор :disabled выбирает неактивные элементы. У неактивных элементов установлен атрибут disabled. Многие браузеры по умолчанию оформляют отключённые элементы input блеклым серым цветом:

input:disabled {
    property:value;
}

Селекторы псевдокласса для позиции

Селектор первого дочернего элемента :first-child выбирает первый элемент, который будет первым дочерним элементом внутри указанного родительского контейнера. Например, вот так можно выбрать элемент a, если он является первым дочерним элементом в родительском контейнере:

a:first-child {
    property: value;
}

Селектор последнего дочернего элемента :last-child, выбирает элемент, который будет последним дочерним элементом внутри родительского контейнера. Например, вот так можно выбрать элемент a, который является последним дочерним элементом в родительском контейнере:

a:last-child {
    property: value;
}

Селектор первого типа, :first-of-type, выбирает элементы, которые являются первыми элементами этого конкретного типа в родительском контейнере. Например, вот так выбрать первый p внутри div:

div p:first-of-type {
    property: value;
}

Селектор последнего типа, :last-of-type, выбирает элементы, которые являются последними элементами этого конкретного типа в родительском контейнере. Например, вот так выбрать последний p внутри div

div p:last-of-type {
    property: value;
}

Селектор :nht-child() полезен, когда вы хотите выбрать элементы на основе выражения, например чётные или нечётные элемента.

Значения ключевых слов псевдокласса :nht-child()

odd — представляет элементы, чьё числовое положение в ряду соседних элементов является нечётным: 1, 3, 5 и т.д.

even — представляет элементы, чьё числовое положение в ряду соседних элементов является чётным: 2, 4, 6 и т.д.

Функциональная нотация псевдокласса :nht-child()

<An+B> — Представляет элементы, чьё числовое положение в ряду соседних элементов соответствует шаблону An+B для каждого положительного целого числа и нулевого значения n, где:

A — целочисленный размер шага, B — целочисленное смещение, n — все неотрицательные целые числа, начиная с 0.

Его можно прочитать как An+B элемент списка. A и B целые числа.

Примеры селектора псевдокласса :nht-child()

tr:nth-child(odd) или tr:nth-child(2n+1) — Нечётные строки HTML-таблицы: 1, 3, 5, и т.д.

tr:nth-child(even) или tr:nth-child(2n) — Чётные троки HTML-таблицы: 2, 4, 6, и т.д.

:nth-child(7) — Представляет седьмой элемент.

:nth-child(5n) — Представляет элементы 5 [=5×1], 10 [=5×2], 15 [=5×3], и т.д. В результате формулы первым возвращается 0 [=5x0], что приводит к несоответствию, поскольку элементы индексируются с 1, тогда как n начинает с 0. Поначалу это может показаться странным, но имеет больше смысла, когда часто B больше 0, как в следующем примере.

:nth-child(n+7) — Представляет седьмой и все последующие элементы: 7 [=0+7], 8 [=1+7], 9 [=2+7], и т.д.

:nth-child(3n+4) — Представляет элементы: 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], и т. д.

:nth-child(-n+3) — Представляет первые три элемента: [=-0+3, -1+3, -2+3]

p:nth-child(n) — Представляет каждый элемент <p> в группе родственных элементов. Это выберет те же элементы, что и простой селектор p (хотя с более высокой специфичностью).

p:nth-child(1) или p:nth-child(0n+1) — Представляет каждый <p> являющийся первым элементом в группе. Это тоже самое, что и селектор :first-child (имеет туже специфику).

p:nth-child(n+8):nth-child(-n+15) — Представляет элемент <p> с восьмого по пятнадцатый в группе элементов.

CSS Селекторы псевдоэлементов

Селекторы псевдоэлементов используются для стилизации определённой части элемента — вы можете использовать их для вставки нового содержимого или изменения внешнего вида определённого раздела содержимого.

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

В отличие от псевдоклассов, которым предшествует один символ двоеточия :, псевдоэлементам предшествует два символа двоеточия ::. За символом :: следует ключевое слово, которое позволяет стилизовать определённую часть выбранного элемента.

Общий синтаксис выглядит так:

element::pseudo-element-selector {
    property:value;
}

Обязательно используйте символ :: вместо : при использовании селекторов псевдоэлементов — это поможет отличить псевдоклассы от псевдоэлементов.

Теперь давайте рассмотрим некоторые из наиболее распространённых псевдоэлементов, с которыми вы столкнётесь.

Псевдоэлемент ::before

В CSS ::before создаёт первый дочерний псевдоэлемент выбранного элемента. Часто он используется для декоративных целей, добавления содержимого к элементу с помощью свойства content. Он встроен по умолчанию. Вы можете использовать его для вставки содержимого перед элементом:

p::before {
    property: value;
}

Псевдоэлемент ::after

В CSS ::after создаёт последний дочерний псевдоэлемент выбранного элемента. Часто он используется для декоративных целей, добавления содержимого к элементу с помощью свойства content. Он встроен по умолчанию. Вы можете использовать его для вставки содержимого после элемента:

p::after {
    property: value;
}

Псевдоэлемент ::first-letter

CSS псевдоэлемент ::first-letter применяет стили к первой букве первой строки блочного элемента, но только в том случае, если ему не предшествует другой контент (например, изображение или встроенные таблицы).

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

p::first-letter {
    property: value;
}

Псевдоэлемент ::first-line

CSS псевдоэлемент ::first-line применяет стили к первой строке блочного элемента.

Эффекты ::first-line ограничены длинной и одержимым первой строки текста в элементе. Длинна первой строки зависит от множества факторов, включая ширину документа и размер шрифта текста. ::first-line не действует, если первый дочерний элемент, который будет первой часть первой строки, является встроенным элементом уровня блока, например встроенной таблицей.

Вы можете использовать псевдоэлемент ::first-line для выбора первой строки абзаца:

p::first-line {
    property: value;
}

Псевдоэлемент ::selection

CSS псевдоэлемент ::selection применяет стили к той части документа, которая была выделена пользователем.

Вы можете использовать псевдоэлемент ::selection, чтобы задать цвет текста и фона выделенные в параграфе:

p::selection {
    color: lightblue;
    background-color: navy;
}

Заключение

Надеюсь, эта шпаргалка по наиболее часто используемым CSS селекторам оказалась вам полезной.