nth-of-type සුළුවර්ගය
nth-of-type සුළුවර්ගය එම මූලද්‍රව්‍යය තෝරා ගනී,
එය නිශ්චිත වර්ගයේ nවන ළමයෙකු වන.
එනම්, මම h2:nth-of-type(4) ලියන්නේ නම්
- දෙමව්පියෙකු තුළ 4වන h2 හමු වේ (nth-child වෙනස්ව,
දෙමව්පියෙකු තුළ 4වන මූලද්‍රව්‍යය වන එම h2 පමණක් හමු වේ).
වාක්‍ය රචනය
cssතෝරන්නා:nth-of-type(අංකය | odd | even | ප්‍රකාශනය){
}
අගයන්
| අගය | විස්තරය |
|---|---|
| අංකය |
1 වෙතින් ආරම්භ වන ධන අංකය. අපට පැමිණීමට අවශ්‍ය මූලද්‍රව්‍යයේ අංකය නියම කරයි.
මූලද්‍රව්‍ය අංක කිරීම 1 වෙතින් ආරම්භ වේ.
|
odd |
ඔත්තේ මූලද්‍රව්‍ය. |
even |
ඉරට්ටේ මූලද්‍රව්‍ය. |
| ප්‍රකාශනය |
n අකුර සමඟ විශේෂ ප්‍රකාශන සම්පාදනය කළ හැක,
එය ශුන්‍යයේ සිට (එකකින් නොවේ)
අනන්තය දක්වා සියලු පූර්ණ සංඛ්‍යා නිරූපණය කරයි. එබැවින්, 2n - යන්නෙන් අදහස් වන්නේ සියලු ඉරට්ටේ
අංක (දෙවැන්නෙන් ආරම්භ වේ).
මෙය තේරුම් ගන්නේ කෙසේද? n තුළට අනුක්‍රමිකව
0 වෙතින් අංක ආදේශනය කරන්න: n = 0 නම්, 2n 0 ලබා දෙයි -
එවැනි මූලද්‍රව්‍යයක් නොමැත (මූලද්‍රව්‍ය අංක කිරීම 1 සිට),
n = 1 නම්, 2n 2 ලබා දෙයි - දෙවන මූලද්‍රව්‍යය, n = 2 නම්,
2n 4 ලබා දෙයි - හතරවන මූලද්‍රව්‍යය. 3n ලිවීම - මෙය
සෑම තෙවන මූලද්‍රව්‍යයම වේ (තෙවැනියෙන් ආරම්භ වේ), සහ යනාදි වශයෙන්.
|
උදාහරණය
දෙමව්පියෙකු තුළ 2වන h2 වන
h2 හමු කරමු:
html<div>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
</div>cssh2:nth-of-type(2) {
color: red;
}
Результат:
උදාහරණය
සියලු ඉරට්ටේ h2 හමු කරමු:
html<div>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
</div>cssh2:nth-of-type(even) {
color: red;
}
Результат:
උදාහරණය
සියලු ඔත්තේ h2 හමු කරමු:
html<div>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
<h2>ශීර්ෂකය</h2>
<p>ඡේදය</p>
</div>cssh2:nth-of-type(odd) {
color: red;
}
Результат: