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
kichaguzi: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:
<div>
<h2>kichwa</h2>
<p>aya</p>
<h2>kichwa</h2>
<p>aya</p>
<h2>kichwa</h2>
<p>aya</p>
</div>
h2:nth-of-type(2) {
color: red;
}
:
Mfano
Tutapate h2 zote za kawaida:
<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>
h2:nth-of-type(even) {
color: red;
}
:
Mfano
Tutapate h2 zote zisizo za kawaida:
<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>
h2:nth-of-type(odd) {
color: red;
}
:
