1. Главная
  2. Блог
  3. CSS селекторы

CSS селекторы

CSS селекторы
Автор
Анатолий Ахматов
На чтение
0:21 мин
Обновлено
06.08.2021

Приветствую. Сегодня мы разберем все css селекторы. Ниже подробные таблицы с детальным описанием каждого селектора.

Явные селекторы

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

СелекторПримерОписание
**Все элементы, кроме псевдо-элементов.
.class.classnameЭлемент с class="classname".
#id#containerЭлемент с id="container".
HTML тегdivЭлемент <div>.
[атрибут][name]Элементы с атрибутом name.
[атрибут = значение][name=admin]Элементы с атрибутом  name="admin".
[атрибут ~= значение][name~=admin]Элементы с атрибутом name, в значение которого есть admin
[атрибут ^= значение][src^="http"]Элементы с атрибутом src, значение которого начинается с http.
[атрибут $= значение][src$=".jpg"]Элементы с атрибутом src, значение которого заканчивается на .jpg.
[атрибут *= значение][src*="http"]Элементы с атрибутом src, в значении которого присутствует 'http'.

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

Начинаются с двоеточия, не указываются в разметке документа.

Псевдо-классПримерОписание
:hovera:hoverВыбор ссылки при наведении курсора мышки. Вместо '<a>' может быть любой элемент.
:activea:activeВыбор активной ссылки.
:linka:linkВыбор всех не посещенных ссылок.
:visiteda:visitedВыбор всех посещенных ссылок.
:first-childdiv:first-childВыбор первого дочернего элемента <div>, если у родителя первый элемент именно <div>.
:last-childdiv:last-childВыбор последнего дочернего элемента <div>, если у родителя последний элемент именно <div>.
:only-childdiv:only-childВыбор дочернего элемента <div>, если у родителя  всего один элемент и это <div>.
:nth-child(n)
div:nth-child(2)Выбор второго дочернего элемента <div>, если второй элемент родителя <div>.
div:nth-child(2n)Четные элементы.
div:nth-child(even)Четные элементы.
div:nth-child(2n+1)Нечетные элементы.
div:nth-child(odd)Нечетные элементы.
div:nth-child(3n+2)Элементы номер 2, 5, 8 ...
:nth-last-child(n)div:nth-last-child(2)Выбор второго дочернего элемента <div> с конца, если второй элемент родителя равен <div>.
:first-of-typediv:first-of-typeВыбор первого дочернего элемента <div>.
:last-of-typediv:last-of-typeВыбор последнего дочернего элемента <div>.
:only-of-typediv:only-of-typeВыбор дочернего элемента <div>, если у родителя элемент <div> всего один.
:nth-of-type(n)div:nth-of-type(2)Выбор второго дочернего элемента <div>.
:nth-last-of-type(n)div:nth-last-of-type(2)Выбор второго дочернего элемента <div> с конца.
:enabledinput:enabledВыбор включенного <input>.
:disabledinput:disabledВыбор выключенного <input>.
:focusinput:focusВыбор <input>, который находится в фокусе.
:checkedinput:checkedВыбранный элемент <input> типа radio или checkbox.
:root:rootВыбор корневого элемента в документе.
:emptydiv:emptyПустой элемент <div>, в котором нет ни текста ни элементов.
:lang(язык)div:lang(en)Выбор элемента <div> с атрибутом lang, значение которого начинается с "en".
:target:targetВыбор активного элемента на странице, который имеет якорную ссылку.
:not(селектор):not(div)Выбор всех элементов, кроме <div>.

Псевдо-элементы

Элементы, которых не существуют в HTML документе. Можно сказать особая выборка.

Псевдо-элементПримерОписание
::first-letterdiv::first-letterВыбирает первую букву элемента <div>.
::first-linediv::first-lineВыбирает первую строку элемента <div>.
::beforediv::beforeВставляет указанное в content:" " содержимое в начало <div>.
::afterdiv::afterВставляет указанное в content:" " содержимое в конец <div>.
::selectiondiv::selectionОформит выделенный (мышкой) текст внутри <div>.

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

Используются символы комбинаторы: , >, +, ~, ,. Они устанавливают связь между селекторами.

КомбинаторПримерОписание
правило, правилоdiv a, span iЭлемент <a> внутри <div> и элемент <i> внутри <span>.
селекторСелектор.quote.activeЭлементы одновременно с двумя классами quote и active.
селектор селекторdiv spanЭлемент <span> внутри <div>.
селектор > селекторdiv > spanЭлементы <span>, у которых родитель <div>.
селектор + селекторdiv + pОдин элемент <p>, который находится сразу после <div>.
селектор ~ селекторdiv ~ pВсе элементы <p>, которые находятся сразу после <div>.

Также может понравится

Как повысить скорость работы сайта

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

Выбор команды разработчиков WordPress

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

Десятки пользователей hubspot делятся высокоэффективными примерами воспитания лидеров

Согласно нашим исследованиям, 41% маркетологов каждый месяц корректируют свои ка
Показать полностью...

Факторы высшего рейтинга google, объясняемые подачей заявления на новую работу

Это наглядное объяснение поможет вам понять, как Google решает, какой контент бу
Показать полностью...

Как использовать trello в качестве бесплатного инструмента для роста

Вот как одна SaaS-компания использует Trello в своих отделах продаж, маркетинга,
Показать полностью...

Работа в обратном направлении: как установить цели и ожидания клиентов

Джессика Миллер и Сэнди Янг из PR 20/20 делятся идеями о постановке целей, превы
Показать полностью...