Что такое селектор

Селектор — это часть CSS-правила, которая указывает, к каким элементам страницы будет применяться стиль.

Общая структура CSS:

селектор {
свойство: значение;
}

Пример:

p {
color: red;
}

В этом примере стиль применяется ко всем тегам <p>.

Селектор по тегу

Самый простой способ применить стиль — указать имя тега.

Пример:

h1 {
color: blue;
}

p {
font-size: 18px;
}

Этот стиль будет применён ко всем тегам указанного типа.

Иногда нужно применить стиль только к определённым элементам. Для этого используется класс.

В HTML класс указывается атрибутом:

<p class="text">Текст</p>

В CSS класс обозначается точкой ..

.text {
color: green;
}

Теперь стиль применяется только к элементам с классом text.

HTML:

<p class="red">Красный текст</p>
<p>Обычный текст</p>

CSS:

.red {
color: red;
}

Идентификатор используется для уникального элемента страницы.

В HTML:

<h1 id="title">Мой сайт</h1>

В CSS используется символ #.

#title {
color: blue;
}

Особенность: - один id должен использоваться только один раз на странице.

HTML:

<h1 id="main-title">Главный заголовок</h1>
<p class="text">Абзац текста</p>

CSS:

#main-title {
color: blue;
}

.text {
font-size: 20px;
}

Можно применить стиль сразу к нескольким тегам.

Пример:

h1, h2, h3 {
color: darkblue;
}

Этот стиль применяется к трём типам заголовков.

CSS позволяет применять стиль только к элементам внутри других элементов.

Пример:

div p {
color: red;
}

Этот стиль применяется только к тегам <p>, которые находятся внутри <div>.

Можно сочетать разные селекторы.

Пример:

p.text {
color: green;
}

Этот стиль применяется только к тегам <p> с классом text.