📋 Selector Cheatsheet
Все CSS селекторы в одном месте с примерами и объяснениями
30 селекторов
🔍
Ничего не найдено. Попробуйте другой запрос.
⭐ Базовые селекторы
*
basic
Универсальный селектор. Выбирает все элементы на странице.
*
Все элементы
* { box-sizing: border-box; }
element
basic
Селектор по типу элемента (тегу). Выбирает все элементы указанного типа.
p
Все параграфы
p { color: blue; }
h1, h2, h3
Все заголовки (группировка)
h1, h2, h3 { font-weight: bold; }
.class
basic
Селектор по классу. Выбирает элементы с указанным классом.
.button
Элементы с классом "button"
.button { padding: 10px 20px; }
.btn.primary
Элементы с обоими классами
.btn.primary { background: blue; }
p.intro
p с классом "intro"
p.intro { font-size: 1.2rem; }
#id
basic
Селектор по ID. Выбирает элемент с указанным ID (должен быть уникальным).
#header
Элемент с id="header"
#header { background: #333; }
#main-content
Элемент с id="main-content"
#main-content { padding: 2rem; }
selector1, selector2
basic
Группировка селекторов. Применяет одни стили к нескольким селекторам.
h1, h2, h3
Все заголовки
h1, h2, h3 { margin-bottom: 1rem; }
.btn, .link
Кнопки и ссылки
.btn, .link { cursor: pointer; }
🔗 Комбинаторы
A B
combinator
Потомок (Descendant). Выбирает B на любом уровне вложенности внутри A.
div p
Все p внутри div (любой уровень)
<div>
<p>Выберётся</p>
<section>
<p>Тоже выберется</p>
</section>
</div>
div p { color: blue; }
A > B
combinator
Прямой потомок (Child). Выбирает только непосредственных детей B внутри A.
div > p
Только прямые дети p
<div>
<p>Выберётся</p>
<section>
<p>НЕ выберется</p>
</section>
</div>
div > p { color: red; }
A + B
combinator
Соседний элемент (Adjacent Sibling). Выбирает B, идущий сразу после A.
h1 + p
p сразу после h1
<h1>Заголовок</h1>
<p>Выберётся (сосед)</p>
<p>НЕ выберется</p>
h1 + p { font-weight: bold; }
A ~ B
combinator
Все соседи (General Sibling). Выбирает все B после A на том же уровне.
h1 ~ p
Все p после h1
<h1>Заголовок</h1>
<p>Выберётся</p>
<span>Не p</span>
<p>Тоже выберется</p>
h1 ~ p { color: green; }
🎭 Псевдоклассы
:hover, :focus, :active
pseudo-class
Динамические псевдоклассы. Реагируют на действия пользователя.
:hover
При наведении мыши
a:hover { color: red; }
:focus
В фокусе (после клика/Tab)
input:focus { border: 2px solid blue; }
:active
В момент клика
button:active { transform: scale(0.95); }
:visited
Посещённая ссылка
a:visited { color: purple; }
:first-child, :last-child
pseudo-class
Структурные псевдоклассы. Выбирают элементы по позиции среди братьев.
:first-child
Первый ребёнок родителя
li:first-child { font-weight: bold; }
:last-child
Последний ребёнок родителя
li:last-child { border-bottom: none; }
:only-child
Единственный ребёнок
p:only-child { text-align: center; }
:nth-child()
pseudo-class
Выбирает N-й дочерний элемент. Принимает число, ключевое слово или формулу.
:nth-child(2)
Второй ребёнок
li:nth-child(2) { color: red; }
:nth-child(odd)
Нечётные (1, 3, 5...)
tr:nth-child(odd) { background: #f5f5f5; }
:nth-child(even)
Чётные (2, 4, 6...)
tr:nth-child(even) { background: #fff; }
:nth-child(2n+1)
Формула (нечётные)
li:nth-child(2n+1) { }
:nth-child(3n)
Каждый третий
li:nth-child(3n) { color: blue; }
:first-of-type, :nth-of-type()
pseudo-class
Как nth-child, но учитывает только элементы данного типа.
:first-of-type
Первый среди своего типа
p:first-of-type { font-size: 1.2rem; }
:last-of-type
Последний среди своего типа
p:last-of-type { margin-bottom: 0; }
:nth-of-type(2)
Второй p среди братьев
p:nth-of-type(2) { color: red; }
:not()
pseudo-class
Отрицание. Выбирает элементы, НЕ соответствующие селектору внутри скобок.
:not(.special)
Все, кроме класса special
li:not(.special) { color: gray; }
:not([type="submit"])
Все input, кроме submit
input:not([type="submit"]) { width: 100%; }
:checked, :disabled, :required
pseudo-class
Псевдоклассы для форм. Реагируют на состояние элементов формы.
:checked
Отмеченный checkbox/radio
input:checked + label { font-weight: bold; }
:disabled
Отключённый элемент
button:disabled { opacity: 0.5; }
:required
Обязательное поле
input:required { border-left: 3px solid red; }
:valid / :invalid
Валидное/невалидное поле
input:valid { border-color: green; }
✨ Псевдоэлементы
::before, ::after
pseudo-element
Создают виртуальные элементы до или после содержимого. Требуют
content.::before
Контент перед элементом
.quote::before {
content: "«";
font-size: 2rem;
}
::after
Контент после элемента
.required::after {
content: " *";
color: red;
}
::first-letter, ::first-line
pseudo-element
Стилизуют первую букву или первую строку блока текста.
::first-letter
Первая буква
p::first-letter {
font-size: 3rem;
font-weight: bold;
}
::first-line
Первая строка
p::first-line {
font-weight: bold;
}
::selection
pseudo-element
Стилизует текст, выделенный пользователем.
::selection
Выделенный текст
::selection {
background: #fa709a;
color: white;
}
🏷️ Атрибутные селекторы
[attr]
attribute
Выбирает элементы с указанным атрибутом (любое значение).
[href]
Все элементы с атрибутом href
a[href] { color: blue; }
[required]
Все обязательные поля
input[required] { border: 2px solid red; }
[attr=value]
attribute
Выбирает элементы с точным значением атрибута.
[type="text"]
input с type="text"
input[type="text"] { width: 100%; }
[target="_blank"]
Ссылки в новой вкладке
a[target="_blank"]::after {
content: " ↗";
}
[attr^=value]
attribute
Выбирает элементы, атрибут которых начинается с указанного значения.
[href^="https"]
Ссылки, начинающиеся с https
a[href^="https"] { color: green; }
[class^="btn"]
Классы, начинающиеся с btn
[class^="btn"] { cursor: pointer; }
[attr$=value]
attribute
Выбирает элементы, атрибут которых заканчивается указанным значением.
[href$=".pdf"]
Ссылки на PDF файлы
a[href$=".pdf"]::after {
content: " 📄";
}
[src$=".png"]
PNG изображения
img[src$=".png"] { border: 1px solid #ccc; }
[attr*=value]
attribute
Выбирает элементы, атрибут которых содержит указанное значение.
[class*="btn"]
Классы, содержащие "btn"
[class*="btn"] { padding: 10px; }
[href*="example"]
Ссылки, содержащие "example"
a[href*="example"] { color: orange; }
[attr~=value], [attr|=value]
attribute
Дополнительные операторы для атрибутов.
[class~="btn"]
Слово "btn" в списке классов
[class~="btn"] { }
[lang|="en"]
en или начинается с en-
[lang|="en"] { font-family: serif; }
⚖️ Специфичность (Specificity)
Расчёт специфичности
concept
Специфичность определяет, какой стиль применяется при конфликте. Чем выше вес, тем выше приоритет.
| Селектор | Вес | Пример |
|---|---|---|
| Inline стили | 1,0,0,0 | style="color: red" |
| ID | 0,1,0,0 | #header |
| Классы, атрибуты, псевдоклассы | 0,0,1,0 | .btn, [type], :hover |
| Типы, псевдоэлементы | 0,0,0,1 | div, ::before |
| Универсальный | 0,0,0,0 | * |
p
0,0,0,1
p { }
.intro
0,0,1,0
.intro { }
#main
0,1,0,0
#main { }
div p.intro
0,0,1,1
div p.intro { }
.container > ul > li
0,0,1,3
.container > ul > li { }
#nav .menu a:hover
0,1,1,2
#nav .menu a:hover { }
!important
concept
Переопределяет любую специфичность. Используйте осторожно!
color: red !important
Переопределит всё
.button {
color: red !important;
}