Селекторы

Селектор определяет, к каким элементам применится правило. Чем точнее вы умеете выбирать элементы, тем меньше лишних классов приходится добавлять в разметку.

Селектор тега

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

<style>
  li {
    color: teal;
  }
</style>
 
<ul>
  <li>Хлеб</li>
  <li>Молоко</li>
</ul>

Звёздочка * — универсальный селектор: она выбирает вообще все элементы. Её используют редко, например чтобы задать общее правило для всей страницы.

Классы

Чтобы оформить не все абзацы, а только некоторые, им дают класс — атрибут class с придуманным вами именем. Селектор класса начинается с точки:

<style>
  .note {
    background: lightyellow;
  }
</style>
 
<p class="note">Абзац с классом note.</p>
<p>Обычный абзац.</p>

Один класс можно дать многим элементам, а одному элементу — несколько классов через пробел: class="note big". Классы — основной инструмент оформления.

Селектор id

Атрибут id — уникальное имя элемента: на странице может быть только один элемент с таким значением. Селектор id начинается с решётки:

<style>
  #main-title {
    color: royalblue;
  }
</style>
 
<h2 id="main-title">Заголовок с id</h2>
<h2>Другой заголовок</h2>

Для оформления id используют редко: стиль нельзя повторить на другом элементе. Чаще id нужен для якорных ссылок и скриптов.

Несколько селекторов сразу

Одно правило можно применить к разным элементам, перечислив селекторы через запятую. Это называют группировкой:

<style>
  h3, .accent {
    color: darkorange;
  }
</style>
 
<h3>Заголовок</h3>
<p class="accent">Абзац того же цвета.</p>

Если написать селекторы слитно, без пробела, получится уточнение: p.accent выберет только абзацы с классом accent.

Вложенность

Селектор через пробел выбирает элементы внутри другого элемента на любой глубине. Знак > ограничивает выбор прямыми потомками — элементами, которые лежат непосредственно внутри:

<style>
  .menu a { color: seagreen; }
</style>
 
<nav class="menu">
  <a href="#">Ссылка в меню</a>
</nav>
<a href="#">Ссылка вне меню</a>

Вложенность избавляет от лишних классов: не нужно давать класс каждой ссылке меню.

Селектор по атрибуту

В квадратных скобках можно указать атрибут и его значение:

<style>
  a[target="_blank"] { color: darkorange; }
</style>
 
<p><a href="#" target="_blank">Откроется в новой вкладке</a></p>
<p><a href="#">Обычная ссылка</a></p>

Частая ошибка

В селекторе класса забывают точку. Тогда браузер ищет тег с таким именем, не находит его, и правило ничего не меняет:

<style>
  note { color: crimson; }
  .price { color: seagreen; }
</style>
 
<p class="note">Без точки: стиль не применился.</p>
<p class="price">С точкой: зелёный текст.</p>

Точка нужна только в CSS — в атрибуте class её не пишут.