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 может быть «ДОЛГИМ»?

Помните волну курсов по типу «Как создать сайт на WP без навыков программирования?»

Лет 5 назад люди осознали что с помощью плагинов можно навесить на свой сайт кучу полезных функций, а еще есть плагины ускорения, а еще SEO оптимизации:

Перейти в вк

Со школы у меня мало воспоминаний, но одно есть и очень яркое. Как фильм, в нем есть все: драма, девушка, удар током)

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

Мама собрала все нужные доки. И вот я еду, в свой первый лагерь) Со мной поехала красивая девочка Аня из параллели (до этого были не знакомы), тоже по такому же набору бумажек) Больше никого знакомого.

Перейти в вк

📔 У вас тоже бывает такое? Читаешь книгу, спустя примерно половину, начинаешь в жизни разговаривать как писатель

Позвать друга в бильярд:

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

Перейти в вк

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

Самые популярные маркетинговые предложения от 10 высокоэффективных агентств

10 агентств поделились своим передовым опытом в области маркетинговых предложени
Показать полностью...

6 Советов по контент-маркетингу и вашему сайту

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

Как не запутать Google

Один небольшой неверный шаг в Интернете может оказать огромное влияние на ваш те
Показать полностью...

Как увеличить частоту откликов в чате в реальном времени, по мнению 46 маркетологов

От персонализации вашего первоначального запроса до использования данных для вст
Показать полностью...

Отслеживание конверсий

Привет, я Брент Карри, специалист по поисковому маркетингу компании Webresult. С
Показать полностью...

Как происходит привлечение клиентов через сайт?

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