Përdorimi i id në CSS
Gjatë përdorimit të id janë të disponueshme të gjitha
manipulimet me selektorët, të cilat i kemi mësuar
në mësimet e mëparshme.
Shembull
Le të kemi kodin e mëposhtëm:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Le të zgjedhim h2 nga elementi me id,
të barabartë me block, dhe ta ngjyrosim atë në të kuqe
ngjyrë:
#block h2 {
color: red;
}
Tani le të zgjedhim p nga elementi me
id, të barabartë me block, dhe ta ngjyrosim
atë në të gjelbër:
#block p {
color: green;
}
Shembull
Le të kemi tani kodin e mëposhtëm:
<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>
Le të zgjedhim elementet me klasën header,
që ndodhen brenda elementit me id,
të barabartë me block, dhe t'i ngjyrosim ata
në të kuqe:
#block .header {
color: red;
}
Tani le të zgjedhim titullet h2 me klasën
header, që ndodhen brenda elementit
me id, të barabartë me block, dhe t'i ngjyrosim
ata në të kuqe:
#block h2.header {
color: red;
}
Detyra praktike
Shkruani një selektor, i cili do të zgjedhë të gjithë h2,
që ndodhen në elementin me id, të barabartë me
elem. Kontrolloni selektorin tuaj në kodin e mëposhtëm:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Shkruani një selektor, i cili do të zgjedhë të gjithë elementet
me klasën text, që ndodhen në elementin
me id, të barabartë me elem. Kontrolloni
selektorin tuaj në kodin e mëposhtëm:
<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>
Shkruani një selektor, i cili do të zgjedhë të gjithë paragrafët
me klasën text, që ndodhen në elementin
me id, të barabartë me elem. Kontrolloni
selektorin tuaj në kodin e mëposhtëm:
<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>
Shkruani një selektor, i cili do të zgjedhë të gjithë li
me klasën text, që ndodhen në elementin
me id, të barabartë me elem. Kontrolloni
selektorin tuaj në kodin e mëposhtëm:
<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>
