id-ի օգտագործումը CSS-ում

id օգտագործելիս հասանելի են բոլոր գործողությունները սելեկտորների հետ, որոնք մենք ուսումնասիրել ենք նախորդ դասերում։

Օրինակ

Ենթադրենք ունենք հետևյալ կոդը՝

html<div id="block">
  <h2>Title</h2>
  <p>text</p>
  <p>text</p>
</div>

Եկեք ընտրենք h2 այն տարրից, որի id-ն հավասար է block-ի, և ներկենք այն կարմիր գույնով՝

css#block h2 {
  color: red;
}

Իսկ հիմա եկեք ընտրենք p-ն այն տարրից, որի id-ն հավասար է block-ի, և ներկենք այն կանաչ գույնով՝

css#block p {
  color: green;
}

Օրինակ

Ենթադրենք հիմա ունենք հետևյալ կոդը՝

html<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-ի հավասար ունեցող տարրի ներսում, և ներկենք դրանք կարմիր գույնով՝

css#block .header {
  color: red;
}

Իսկ հիմա եկեք ընտրենք h2 վերնագրերը header դասով, որոնք գտնվում են id-ն block-ի հավասար ունեցող տարրի ներսում, և ներկենք դրանք կարմիր գույնով՝

css#block h2.header {
  color: red;
}

Գործնական առաջադրանքներ

Задание 1

Գրեք սելեկտոր, որը կընտրի բոլոր h2 տարրերը, որոնք գտնվում են id-ն elem հավասար ունեցող տարրի ներսում։ Ստուգեք ձեր սելեկտորը հետևյալ կոդի վրա՝

html<div id="elem">
  <h2>Choose</h2>
  <p>---</p>
  
  <h2>Choose</h2>
  <p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

Задание 2

Գրեք սելեկտոր, որը կընտրի բոլոր text դասով տարրերը, որոնք գտնվում են id-ն elem հավասար ունեցող տարրի ներսում։ Ստուգեք ձեր սելեկտորը հետևյալ կոդի վրա՝

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

Задание 3

Գրեք սելեկտոր, որը կընտրի բոլոր պարբերությունները text դասով, որոնք գտնվում են id-ն elem հավասար ունեցող տարրի ներսում։ Ստուգեք ձեր սելեկտորը հետևյալ կոդի վրա՝

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

Задание 4

Գրեք սելեկտոր, որը կընտրի բոլոր li տարրերը text դասով, որոնք գտնվում են id-ն elem հավասար ունեցող տարրի ներսում։ Ստուգեք ձեր սելեկտորը հետևյալ կոդի վրա՝

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