Селекторы типа, класса и ID
===========================

* Назад
* Обзор: Building blocks
* Далее

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

| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
| --- | --- |
| Задача: | Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу. |

Селекторы типа
--------------

**Селектор типа** иногда называется *селектором имени тега* или *селектором элемента*, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

**Попробуйте добавить CSS-правило, чтобы выбрать элемент `<h1>` и изменить его цвет на синий.**

Универсальный селектор
----------------------

Универсальный селектор обозначается звёздочкой (`*`). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.

Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.

### Использование универсального селектора для облегчения чтения ваших селекторов

Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента `<article>`, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого `<article>`, и сделать их шрифт жирным, мы могли бы использовать псевдокласс `:first-child`, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента `<article>`:


```css
article :first-child {
  font-weight: bold;
}
```


Однако этот селектор можно спутать с `article:first-child`, который выберет любой элемент `<article>`, являющийся первым дочерним элементом другого элемента .

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс `:first-child` , чтобы было очевидно, что делает селектор. Он выбирает *любой* элемент, который является первым дочерним элементом элемента `<article>` или первым дочерним элементом любого потомка элемента `<article>`:


```css
article \*:first-child {
  font-weight: bold;
}
```


Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

Селекторы класса
----------------

Селектор класса начинается с символа точки (`.`). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем `.highlight`, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.

### Нацеливание классов на отдельные элементы

Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим `<span>` с классом `highlight` иначе, чем заголовок `<h1>` с классом `highlight`. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.

Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.

### Нацеливание на элемент, к которому применено более одного класса

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

В примере ниже у нас есть `<div>`, содержащий примечание. Серая граница применяется когда блок имеет класс `notebox`. Если у блока есть также класс `warning` или `danger`, мы меняем `border-color` (en-US).

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему `<div>` не применён ни один стиль, так как он имеет только класс `danger`; ему нужен ещё и класс `notebox`, чтобы получить какую-нибудь стилизацию.

Селекторы ID
------------

Селектор ID начинается с `#`, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один `id`. Можно выбрать элемент, которому присвоен `id`, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

> 
> \*\*Предупреждение:\*\*Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.
> 
> 
> 

**Примечание:** Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

В следующей статье
------------------

Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.

* Назад
* Обзор: Building blocks
* Далее