Користење на id во CSS

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

Пример

Нека имаме следниов код:

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

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

#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;
}

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

Напишете селектор кој ќе ги избере сите h2, кои се наоѓаат во елементот со id, еднаков на elem. Тестирајте го вашиот селектор на следниов код:

<div id="elem">
	<h2>Choose</h2>
	<p>---</p>
	
	<h2>Choose</h2>
	<p>---</p>
</div>

<h2>Do not +++</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>