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>.

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

Как создать эффективный веб-сайт

В нашем последнем выпуске еженедельника Webresult Ribbit Микель и Мэри обсуждают
Показать полностью...

Вот как мы увеличили трафик linkedin почти на 300% за один месяц [закуски с данными]

В этом эпизоде закусок с данными мы поговорим об изменениях в алгоритме LinkedIn
Показать полностью...

Используйте Чат для увеличения конверсий

Добавление живого чата на ваш сайт-отличный способ повысить конверсию. Мы собрал
Показать полностью...

Очистите свои плохие данные crm, как это делают профессионалы

В партнерстве с нашими друзьями в Insycle более 50 маркетологов делятся своими л
Показать полностью...

10 заповедей WordPress

Независимо от того, новичок вы в WordPress или нет, следование этим 10 заповедям
Показать полностью...

Повысьте безопасность вашего сайта за 3 шага

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