Использование id в CSS

При использовании id доступны все манипуляции с селекторами, которые мы изучили в предыдущих уроках.

Пример 1

Пусть у нас есть следующий код:

<div id="block">
	<h2>Title</h2>
	<p>text</p>
	<p>text</p>
</div>

Давайте выберем h2 из элемента с id, равным block, и покрасим его в красный цвет:

#block h2 {
	color: red;
}

А теперь давайте выберем p из элемента с id, равным block, и покрасим его в зеленый цвет:

#block p {
	color: green;
}

Пусть теперь у нас есть следующий код:

<div id="block">
	<h2 class="header">Title</h2>
	<p>text</p>
	<p>text</p>
	
	<h3 class="header">Title</h3>
	<p>text</p>
	<p>text</p>
</div>

Давайте выберем элементы с классом header, находящийся внутри элемента с id, равным block, и покрасим их в красный цвет:

#block .header {
	color: red;
}

А теперь выберем заголовки h2 с классом header, находящийся внутри элемента с id, равным block, и покрасим их в красный цвет:

#block h2.header {
	color: red;
}