Коришћење id у CSS-у

При коришћењу id доступне су све манипулације са селекторима које смо учили у претходним лекцијама.

Пример

Нека имамо следећи код:

<div id="block">
	<h2>Наслов</h2>
	<p>текст</p>
	<p>текст</p>
</div>

Хајде да изаберемо h2 из елемента са id, једнаким block, и обојимо га у црвено:

#block h2 {
	color: red;
}

А сада хајде да изаберемо p из елемента са id, једнаким block, и обојимо га у зелено:

#block p {
	color: green;
}

Пример

Нека сада имамо следећи код:

<div id="block">
	<h2 class="header">Наслов</h2>
	<p>текст</p>
	<p>текст</p>
	
	<h3 class="header">Наслов</h3>
	<p>текст</p>
	<p>текст</p>
</div>

Хајде да изаберемо елементе са класом header, који се налазе унутар елемента са id, једнаким block, и обојимо их у црвено:

#block .header {
	color: red;
}

А сада изаберимо наслове h2 са класом header, који се налазе унутар елемента са id, једнаким block, и обојимо их у црвено:

#block h2.header {
	color: red;
}

Практични задаци

Напишите селектор који ће изабрати све h2, који се налазе у елементу са id, једнаким elem. Проверите ваш селектор на следећем коду:

<div id="elem">
	<h2>Изабери</h2>
	<p>---</p>
	
	<h2>Изабери</h2>
	<p>---</p>
</div>

<h2>Не бирај +++</h2>
<p>---</p>

Напишите селектор који ће изабрати све елементе са класом text, који се налазе у елементу са id, једнаким elem. Проверите ваш селектор на следећем коду:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

Напишите селектор који ће изабрати све пасусе са класом text, који се налазе у елементу са id, једнаким elem. Проверите ваш селектор на следећем коду:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">---</li>
		<li class="text">---</li>
		<li class="text">---</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

Напишите селектор који ће изабрати све li са класом text, који се налазе у елементу са id, једнаким elem. Проверите ваш селектор на следећем коду:

<div id="elem">
	<p class="text">---</p>
	<p class="text">---</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>