nth-of-type Sözde Sınıfı
nth-of-type sözde sınıfı,
belirtilen türden n. eleman olan öğeyi seçer.
Yani, h2:nth-of-type(4) yazarsam
- ebeveyndeki 4. h2 bulunacaktır
(ebeveyndeki 4. eleman olan h2'yi
bulan nth-child'tan farklı olarak).
Sözdizimi
seçici:nth-of-type(sayı | odd | even | ifade){
}
Değerler
| Değer | Açıklama |
|---|---|
| sayı |
1'den başlayan pozitif bir sayı. İlgilenilen öğenin
numarasını belirtir.
Öğe numaralandırması 1'den başlar.
|
odd |
Tek numaralı öğeler. |
even |
Çift numaralı öğeler. |
| ifade |
N harfini kullanarak özel ifadeler oluşturulabilir; burada n,
sıfırdan (birden değil) sonsuza kadar olan 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 yerine sırayla 0 ve sonrasındaki
sayılar konur: eğer n = 0 ise, 2n 0 verir - böyle bir öğe yoktur (öğe numaralandırması 1'den başlar),
eğer n = 1 ise, 2n 2 verir - ikinci öğe, eğer n = 2 ise,
2n 4 verir - dördüncü öğe. 3n yazılırsa - bu
her üçüncü öğe olacaktır (üçüncüden başlayarak), ve böyle devam eder.
|
Örnek
Ebeveyndeki 2. h2 olan
h2'yi bulalım:
<div>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
</div>
h2:nth-of-type(2) {
color: red;
}
:
Örnek
Tüm çift h2'leri bulalım:
<div>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
</div>
h2:nth-of-type(even) {
color: red;
}
:
Örnek
Tüm tek h2'leri bulalım:
<div>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
<h2>başlık</h2>
<p>paragraf</p>
</div>
h2:nth-of-type(odd) {
color: red;
}
: