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

Общий синтаксис:

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

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

Обращается ко всем элементам с указанным тегом. Самый простой способ — он применяется ко всем элементам этого типа на странице.

Пример CSS:

p {
    color: blue;
}

HTML:

<p>Этот текст станет синим</p>
<p>И этот тоже</p>

Результат в браузере:

2. Селектор по классу

Обращается ко всем элементам с определённым атрибутом class. В HTML класс добавляется через атрибут class, а в CSS обозначается точкой ..

Пример CSS:

.text-red {
    color: red;
}

HTML:

<p class="text-red">Этот текст красный</p>
<h3 class="text-red">И этот заголовок красный</h3>

Результат в браузере:

3. Селектор по id

Обращается к элементу с определённым атрибутом id. id должен быть уникальным на странице. В HTML id добавляется через атрибут id, в CSS обозначается решёткой #.

Пример CSS:

#unique-text {
    color: green;
}

HTML:

<p id="unique-text">Этот текст зелёный, и такой id только один</p>

Результат в браузере:

4. Приоритет селекторов

Что произойдёт, если на один элемент действуют разные селекторы? Победит тот, у кого выше приоритет.

Порядок приоритета (от самого сильного к слабому):

• id — самый сильный
• класс — сильнее, чем селектор по тегу
• тег — самый слабый

Пример:

.text-blue { color: blue; }      /* класс */
#text-red { color: red; }        /* id */
p { color: green; }              /* тег */

<p id="text-red" class="text-blue">Какой цвет?</p>

Результат: текст будет красным, потому что у id самый высокий приоритет.