PrepBro
← Назад к вопросам

Как использовать селектор?

1.3 Junior🔥 181 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI22 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

CSS селекторы: Полный гайд к использованию

Целекторы (selectors) — это основа CSS. Они определяют, какие HTML элементы будут стилизованы. Хорошее понимание селекторов критически важно для эффективной разработки, так как они используются не только в CSS, но и в JavaScript (querySelector, querySelectorAll), тестировании и других местах.

Базовые селекторы

1. Селектор типа элемента (Type Selector)

/* Стилизует все элементы <p> */
p {
  color: blue;
  font-size: 16px;
}

/* Стилизует все <h1> */
h1 {
  color: red;
  font-weight: bold;
}

2. Селектор класса (Class Selector)

/* Все элементы с классом "button" */
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
}

/* Элемент с несколькими классами */
.button.primary {
  font-weight: bold;
}

<button class="button">Обычная кнопка</button>
<button class="button primary">Основная кнопка</button>

3. Селектор ID (ID Selector)

/* ID должен быть уникальным на странице */
#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

<header id="header">Заголовок страницы</header>

4. Универсальный селектор (Universal Selector)

/* Выбирает ВСЕ элементы */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Выбирает все дети внутри .container */
.container * {
  color: black;
}

Селекторы атрибутов (Attribute Selectors)

/* Элемент с определённым атрибутом */
input[type="text"] {
  border: 1px solid #ccc;
  padding: 5px;
}

input[type="submit"] {
  background-color: #007bff;
  color: white;
}

/* Атрибут содержит значение */
a[href*="example.com"] {
  color: green;
}

/* Атрибут начинается с значения */
a[href^="https"] {
  color: blue;
}

/* Атрибут заканчивается на значение */
img[src$=".png"] {
  border: 2px solid gray;
}

/* Атрибут содержит слово (отделено пробелом) */
a[rel~="external"] {
  text-decoration: underline;
}

/* Атрибут точно равен или начинается с дефиса */
lang[lang|="en"] {
  color: navy;
}

Комбинаторы селекторов (Combinators)

1. Потомок (Descendant Combinator)

/* Все <a> внутри <nav> на любом уровне вложенности */
nav a {
  color: blue;
  text-decoration: none;
}

.parent .child {
  font-size: 14px;
}

2. Прямой потомок (Child Combinator)

/* Только прямые дети <div> внутри <main> */
main > div {
  margin: 10px 0;
}

/* Все <li> которые прямые дети <ul> */
ul > li {
  list-style-type: disc;
}

3. Соседний элемент (Adjacent Sibling Combinator)

/* <h2> который идёт сразу после <h1> */
h1 + h2 {
  color: red;
  margin-top: -10px;
}

/* <p> сразу после <img> */
img + p {
  margin-top: 10px;
}

4. Общий соседний элемент (General Sibling Combinator)

/* Все <p> которые идут после <h1> (на одном уровне) */
h1 ~ p {
  color: gray;
}

/* Все <span> после .highlight на одном уровне */
.highlight ~ span {
  font-weight: normal;
}

Псевдоклассы (Pseudo-classes)

/* Состояние ссылки */
a:link { color: blue; }     /* Непосещённая ссылка */
a:visited { color: purple; } /* Посещённая ссылка */
a:hover { color: red; }     /* При наведении мыши */
a:active { color: darkred; } /* При клике */

/* Элемент в фокусе */
input:focus {
  outline: 2px solid blue;
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

/* Первый элемент своего типа */
p:first-of-type {
  font-weight: bold;
}

/* Последний элемент своего типа */
p:last-of-type {
  margin-bottom: 0;
}

/* N-ный элемент */
li:nth-child(2) { color: red; }      /* Второй элемент */
li:nth-child(odd) { background: #f0f0f0; }  /* Нечётные */
li:nth-child(even) { background: white; }   /* Чётные */
li:nth-child(3n) { font-weight: bold; }     /* Каждый 3-й элемент */

/* Только если элемент один */
p:only-child {
  margin: 0;
}

/* Проверка, есть ли дети */
div:empty {
  display: none; /* Скрыть пустые div */
}

/* Отрицание селектора */
p:not(.hidden) {
  display: block;
}

/* Элемент в фокусе (современный вариант) */
input:focus-visible {
  outline: 3px solid blue;
}

Псевдоэлементы (Pseudo-elements)

/* Первая строка текста */
p::first-line {
  color: red;
  font-weight: bold;
}

/* Первая буква */
p::first-letter {
  font-size: 200%;
  font-weight: bold;
}

/* Перед элементом */
button::before {
  content: "→";
  margin-right: 10px;
}

/* После элемента */
button::after {
  content: "←";
  margin-left: 10px;
}

/* Выделенный текст */
::selection {
  background-color: blue;
  color: white;
}

/* Placeholder в input */
input::placeholder {
  color: #999;
  font-style: italic;
}

/* Полоса прокрутки (webkit только) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

Практические примеры

Пример 1: Навигация

nav {
  background-color: #333;
}

nav > ul > li {
  display: inline-block;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

nav a:hover {
  background-color: #555;
}

nav a:active {
  background-color: #007bff;
}

Пример 2: Таблица со стилями

table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tr:hover {
  background-color: #e3f2fd;
}

table td:first-child {
  font-weight: bold;
}

table td:last-child {
  text-align: right;
}

Пример 3: Форма

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

input[disabled] {
  background-color: #e9ecef;
  cursor: not-allowed;
}

input[type="submit"] {
  background-color: #007bff;
  color: white;
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

input[type="submit"]:hover {
  background-color: #0056b3;
}

JavaScript и селекторы

// querySelector — вернёт первый найденный элемент
const button = document.querySelector('.button');
const header = document.querySelector('#header');
const link = document.querySelector('a[href^="https"]');

// querySelectorAll — вернёт все найденные элементы
const buttons = document.querySelectorAll('button.primary');
const items = document.querySelectorAll('li:nth-child(odd)');

// Работа с селекторами
buttons.forEach(btn => {
  btn.addEventListener('click', () => console.log('Clicked'));
});

Специфичность селекторов

Универсальный селектор *:        0
Тип элемента:                    1
Класс, атрибут, псевдокласс:    10
ID:                              100
Инлайн стили:                    1000

Примеры:
p              = 1
.button        = 10
p.button       = 11
p#main         = 101
.button:hover  = 20
#header nav a  = 101

Лучшие практики

  1. Избегай селекторов по ID если можно использовать классы
  2. Не вкладывай селекторы слишком глубоко (max 3 уровня)
  3. Используй понятные имена классов (BEM, SMACSS)
  4. Предпочитай селекторы классов для большинства случаев
  5. Селекторы атрибутов используй для input типов

Заключение

Селекторы CSS — это мощный инструмент, который позволяет точно выбирать элементы для стилизации. Глубокое понимание различных типов селекторов и их комбинаций позволит писать более эффективный и поддерживаемый CSS код, а также упростит работу с JavaScript при выборе DOM элементов.

Как использовать селектор? | PrepBro