Kichujio cha aina cha nth-of-type

Kichujio cha nth-of-type huchagua kipengele, ambacho ni mtu wa n-th wa aina maalum.

Hiyo ni, ikiwa nitaandika h2:nth-of-type(4) - 4-th h2 ndani ya mzazi itapatikana (tofauti na nth-child, ambayo itapata tu h2 ile, ambayo ni kipengele cha 4-th ndani ya mzazi).

Syntax

csskichaguzi:nth-of-type(nambari | odd | even | usemi){

}

Thamani

Thamani	Maelezo
nambari	Nambari chanya kuanzia `1`. Inabainisha nambari ya kipengele, ambacho tunataka kuongezea maneno. Uhesabuji wa vipengele huanza na `1`.
`odd`	Vipengele visivyo vya kawaida.
`even`	Vipengele vya kawaida.
usemi	Inawezekana kutengeneza misemo maalum kwa herufi n, ambayo inaashiria nambari zote kamili kutoka sifuri (si moja) hadi ukosefu wa mwisho. Kwa hivyo, `2n` - inamaanisha nambari zote za kawaida (kuanzia ya pili). Vipi kuelewa hili? Badilisha `n` mfululizo nambari kutoka `0` na kadhalika: ikiwa n = 0, basi 2n itatoa 0 - hakuna kipengele kama hicho (hesabu ya vipengele inaanzia 1), ikiwa n = 1, basi 2n itatoa 2 - kipengele cha pili, ikiwa n = 2, 2n inatoa 4 - kipengele cha nne. Ikiwa utaandika 3n - hii itakuwa kila kipengele cha tatu (kuanzia cha tatu), na kadhalika.

Mfano

Tutapate h2, ambayo ni 2-th h2 ndani ya mzazi:

html<div>
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
</div>

cssh2:nth-of-type(2) {
  color: red;
}

Результат:

Mfano

Tutapate h2 zote za kawaida:

html<div>
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
</div>

cssh2:nth-of-type(even) {
  color: red;
}

Результат:

Mfano

Tutapate h2 zote zisizo za kawaida:

html<div>
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
  
  <h2>kichwa</h2>
  <p>aya</p>
</div>

cssh2:nth-of-type(odd) {
  color: red;
}

Результат: