Истифодаи 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>
