CSS: идентификаторы id

В HTML есть такой атрибут id="". Он предназначен для присвоения тегам уникальных имён, которые используются для доступа к тегам при написании сценариев на JavaScript. Но и в CSS есть возможность присваивать стили тегам по их уникальному атрибуту id="".

Синтаксис применения селектора идентификатора следующий:

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Имя идентификатора объявляется символом # и должно начинаться с латинской буквы, может включать в себя символы "-" и "_" (знак подчёркивания). В имени идентификатора запрещено использовать буквы кириллицы.

<!DOCTYPE html>
<html>
<head>
	<title>CSS: идентификаторы id.</title>
	<style>
		#idDiv { color: red; }
	</style>
</head>
<body>
	<div>Текст первого блока</div>
	<div id="idDiv">Текст второго блока</div>
	<div id="iddiv">Текст третьего блока</div>
</body>
</html>

Выполнив данный пример мы увидем, что регистр символов имеет значение для работы идентификатора и стиль сработает только для второго аббзаца:

CSS: идентификаторы id: работа примера №1
Рисунок 1. Работа примера №1.

Идентификаторы id="idDiv" и id="iddiv" - это разные имена.

Хотя стилевое правило сработает и для двух блоков, если исправить имя id="" в третьем теге <div>, но это нарушит логику использования идентификаторов. По стандарту идентификатор должен быть уникальным чтобы к нему можно было "достучаться" при помощи языка сценариев JavaScript используя метод getElementById.

Селектор идентификатора можно указывать с селектором тега, к которому применён атрибут id="". Синтаксис будет таким:

Тег#имя идентификатора { свойство1: значение; свойство2: значение; ... }

Мы видим, синтаксис ID селектора очень похож на синтаксис селектора классов.

<!DOCTYPE html>
<html>
<head>
	<title>CSS: идентификаторы id.</title>
	<style>
		div#idDiv {
			border: 2px solid blue;
			color: red;
			margin-top: 15px;
		}
		div.myClass {
			border: 2px solid red;
			color: blue;
			margin-top: 15px;
		}
	</style>
</head>
<body>
	<div>Текст первого блока</div>
	<p id="idDiv">Текст второго блока</p>
	<div id="idDiv">Текст третьего блока</div>
	<div class="myClass">Текст четвёртого блока</div>
	<div class="myclass">Текст пятого блока</div>
</body>
</html>

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

Вот результат работы этого примера:

CSS: идентификаторы id: работа примера №2
Рисунок 2. Работа примера №2.

Также читайте: классы CSS.