Matumizi ya id katika CSS

Wakati wa kutumia id, unapata ufikiaji wa uendeshaji wote wa kichaguzi ambao tumejifunza katika masomo yaliyopita.

Mfano

Hebu tuchukulie tuna msimbo ufuatao:

<div id="block">
	<h2>Kichwa</h2>
	<p>maandishi</p>
	<p>maandishi</p>
</div>

Hebu tuchague h2 kutoka kwa kipengele chenye id, kiasi cha block, na tukipake rangi nyekundu:

#block h2 {
	color: red;
}

Sasa hebu tuchague p kutoka kwa kipengele chenye id, kiasi cha block, na tukipake rangi ya kijani:

#block p {
	color: green;
}

Mfano

Hebu sasa tuchukulie tuna msimbo ufuatao:

<div id="block">
	<h2 class="header">Kichwa</h2>
	<p>maandishi</p>
	<p>maandishi</p>
	
	<h3 class="header">Kichwa</h3>
	<p>maandishi</p>
	<p>maandishi</p>
</div>

Hebu tuchague viperengele vyenye kitambulisho header, vilivyo ndani ya kipengele chenye id, kiasi cha block, na tuvipake rangi nyekundu:

#block .header {
	color: red;
}

Sasa tuchague vichwa h2 vilivyo na kitambulisho header, vilivyo ndani ya kipengele chenye id, kiasi cha block, na tuvipake rangi nyekundu:

#block h2.header {
	color: red;
}

Kazi za Vitendo

Andika kichaguzi ambacho kitachagua h2 zote, zilizo ndani ya kipengele chenye id, kiasi cha elem. Jaribu kichaguzi chako kwenye msimbo ufuatao:

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

<h2>Usichague +++</h2>
<p>---</p>

Andika kichaguzi ambacho kitachagua viperengele vyote vilivyo na kitambulisho text, vilivyo ndani ya kipengele chenye id, kiasi cha elem. Jaribu kichaguzi chako kwenye msimbo ufuatao:

<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>

Andika kichaguzi ambacho kitachagua aya zote zilizo na kitambulisho text, zilizo ndani ya kipengele chenye id, kiasi cha elem. Jaribu kichaguzi chako kwenye msimbo ufuatao:

<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>

Andika kichaguzi ambacho kitachagua li zote zilizo na kitambulisho text, zilizo ndani ya kipengele chenye id, kiasi cha elem. Jaribu kichaguzi chako kwenye msimbo ufuatao:

<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>