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>
