Psevdo-sinif nth-child

nth-child psevdo-sinfi valideynin n-ci ovladı olan elementi seçir.

Sintaksis

cssselektor:nth-child(ədəd | odd | even | ifadə) {
  
}

Dəyərlər

Dəyər	Əlavə izah
ədəd	`1`-dən başlayaraq müsbət ədəd. Müraciət etmək istədiyimiz elementin nömrəsini təyin edir. Elementlərin nömrələnməsi `1`-dən başlayır.
`odd`	Tək elementlər.
`even`	Cüt elementlər.
ifadə	Hərfi sıfırdan (bir deyil) sonsuzluğa qədər bütün tam ədədləri ifadə edən `n` hərfi ilə xüsusi ifadələr qura bilərsiniz. Beləliklə, `2n` - bütün cüt nömrələr deməkdir (ikincidən başlayaraq). Bunu necə başa düşmək olar? `n`-də ardıcıl olaraq `0` və s. ədədlərini əvəz edirik: əgər n = 0 olarsa, 2n 0 verəcək - belə bir element yoxdur (elementlərin nömrələnməsi 1-dən başlayır), əgər n = 1 olarsa, 2n 2 verəcək - ikinci element, əgər n = 2 olarsa, 2n 4 verəcək - dördüncü element. Əgər 3n yazsanız - bu hər üçüncü element olacaq (üçüncüdən başlayaraq) və s.

Nümunə

Bu nümunədə valideyninin 4-cü ovladı olan li elementi qırmızı rəng edəcəyik:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

cssli:nth-child(4) {
  color: red;
}

Результат:

Nümunə

İndi bütün cüt li elementlərini qırmızı edək:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

cssli:nth-child(even) {
  color: red;
}

Результат:

Nümunə

İndi bütün tək li elementlərini qırmızı edək:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

cssli:nth-child(odd) {
  color: red;
}

Результат:

Nümunə

İndi hər üçüncü li elementini (üçüncüdən başlayaraq) qırmızı edək:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

cssli:nth-child(3n) {
  color: red;
}

Результат:

Nümunə

Selektorda elementlərin diapazonunu göstərə bilərsiniz. Tutaq ki, 20 elementdən ibarət siyahınız var və 7-dən 14-ə qədər olan elementləri seçmək lazımdır. Bunu belə edə bilərsiniz:

html<ol>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ol>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: