nth-last-child Sözde Sınıfı
nth-last-child sözde sınıfı,
ebeveynden sondan sayılan n'inci çocuk
öğeyi seçer. nth-child
gibi davranır, ancak sayım sondan başlar.
Sözdizimi
seçici:nth-last-child(sayı | odd | even | ifade) {
}
Değerler
| Değer | Açıklama |
|---|---|
| sayı |
1'den başlayan pozitif bir sayı.
Erişmek istediğimiz öğenin numarasını belirtir.
Öğe numaralandırması 1'den başlar.
|
odd |
Tek numaralı öğeler. |
even |
Çift numaralı öğeler. |
| ifade |
N harfi kullanılarak özel ifadeler oluşturulabilir.
N harfi, sıfırdan (birden değil) sonsuza kadar
tüm tam sayıları temsil eder. Böylece, 2n
tüm çift sayıları anlamına gelir (ikinciden başlayarak).
Bu nasıl anlaşılır? n içine sırayla 0
ve sonrasındaki sayılar yerleştirilir: eğer n = 0 ise,
2n 0 verecektir - böyle bir öğe yoktur (öğe numaralandırması 1'den başlar),
eğer n = 1 ise, 2n 2 verecektir - ikinci öğe, eğer n = 2 ise,
2n 4 verecektir - dördüncü öğe. Eğer 3n yazılırsa - bu
her üçüncü öğe olacaktır (üçüncüden başlayarak), vb.
|
Örnek
Bu örnekte, ebeveyninin sondan 4'üncü
çocuğu olan li'yi kırmızı renk yapacağız:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(4) {
color: red;
}
:
Örnek
Şimdi sondan sayılan tüm çift li'leri
kırmızı yapacağız:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(even) {
color: red;
}
:
Örnek
Şimdi sondan sayılan tüm tek li'leri
kırmızı yapacağız:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(odd) {
color: red;
}
:
Örnek
Şimdi sondan sayılan her üçüncü li'yi
kırmızı yapacağız:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(3n) {
color: red;
}
: