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