Селекторы CSS

Селекторы по идентификатору.

Ранее в качестве селекторов использовались теги, например: body, h1, h2. Но если мы хотим в html-странице использовать несколько одинаковых элементов (например, параграфов), и чтобы текст всех параграфов был черным, а одного из них - другим цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.

В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:

параграф с идентификатором (id).

Имена можно присваивать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS).p{ color:black; } p#pink{ color:pink; }Селектор состоит в Селекторы CSS данном случае из элемента (p), разделителя (#) имени идентификатора (pink).На странице может быть только один идентификатор (id) с таким значением. Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей. Селекторы по классуЕсли на странице будет несколько элементов с одинаковым стилем, то им присваивается класс (class) и разделителем в таблице стилей является знак точки (.), например:p#pink{ color:pink; } p.black{ color:black; }

параграф с идентификатором (id) розового цвета.

параграф с классом (class). Черного цвета

Существуют, также и универсальные классы.

Это классы, которые можно использовать Селекторы CSS не только для определенного, а для любого тега.

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

Пример:

.red {color:#FF0000;}

.…

Текст заголовка 1-го уровня, класса red

Текст заголовка 2-го уровня, класса red

Текст параграфа класса red

.…

Также существуют и универсальные идентификаторы. Их синтаксис аналогичен универсальным классам, за исключением использования знака # вместо точки.
documentasuegnp.html
documentasuenxx.html
documentasuevif.html
documentasufcsn.html
documentasufkcv.html
Документ Селекторы CSS