id-ի օգտագործումը CSS-ում
id օգտագործելիս հասանելի են բոլոր
գործողությունները սելեկտորների հետ, որոնք մենք ուսումնասիրել ենք
նախորդ դասերում։
Օրինակ
Ենթադրենք ունենք հետևյալ կոդը՝
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Եկեք ընտրենք h2 այն տարրից, որի id-ն
հավասար է block-ի, և ներկենք այն կարմիր
գույնով՝
#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>
