Cara menggunakan nth-child css

Tip: Lihatlah : n-of-tipe () pemilih untuk memilih elemen yang adalah n th anak, of a particular type , dari induknya.

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh pemilih.

Pemilih:nth-child()4.09.03.53.29.6

CSS Syntax

:nth-child( number ) {
    css declarations ;
} Demo

Contoh lebih

Contoh

Kata kunci aneh dan bahkan yang yang dapat digunakan untuk mencocokkan elemen anak yang indeks aneh atau bahkan (the index of the first child is 1) .

Di sini, kita tentukan dua warna latar belakang yang berbeda untuk elemen aneh dan bahkan p:

p:nth-child(odd) {
    background: #ff0000;
}

p:nth-child(even) {
    background: #0000ff;
}

Contoh

Menggunakan rumus ( an + b ) . Keterangan: a merupakan ukuran siklus, n adalah counter (starts at 0) , dan b adalah nilai offset.

Di sini, kita menentukan warna latar belakang untuk semua elemen p yang indeks merupakan kelipatan dari 3:

nth-last-child () adalah pemilih pseudo-class CSS yang memungkinkan kalian memilih elemen berdasarkan indeks (urutan sumber) di dalam wadahnya, mulai dari elemen terakhir ke atas.

Teman-teman bisa memberikan angka positif sebagai argumen ke: nth-last-child (), yang akan memilih elemen yang indeksnya di dalam induknya cocok dengan argumen: nth-last-child (). Misalnya, li: nth-last-child (3) akan memilih item daftar ketiga hingga terakhir; yaitu, item ketiga dari bawah (mulai dari item terakhir).

Anda juga dapat memasukkan salah satu dari dua kata kunci yang telah ditentukan: genap dan ganjil. li: nth-child (datar) akan memilih semua item daftar dengan nomor indeks genap (2, 4, 6, 8, dll.), dan li: nth-child (datar) akan memilih semua item daftar dengan nomor indeks ganjil (1 , 3, 5, 7, dll.).

: nth-last-child () juga memungkinkan Anda memilih satu atau lebih elemen menggunakan rumus (atau persamaan) —an + b — yang diteruskan sebagai argumen. Sintaksnya adalah: nth-last-child (an + b), di mana Anda mengganti a dan b dengan nilai integer Anda sendiri sehingga, setelah n diganti dengan angka positif (0, 1, 2, 3, dll.), angka yang dihasilkan adalah indeks elemen yang ingin Anda pilih. Misalnya,: nth-last-child (3n +1) akan memilih anak ke-1 (3 * 0 +1 = 1) dari bawah, anak ke-4 (3 * 1 +1 = 4) dari bawah, ke-7 (3) * 2 +1 = 7) anak dari bawah, dll. Dan seterusnya.

Apa: nth-last-child (an + b) yang dilakukan adalah ia membagi anak-anak wadah menjadi elemen (kelompok terakhir mengambil sisanya), dan kemudian memilih elemen ke-b dari masing-masing kelompok. Jadi, li: nth-last-child (3n +1) akan membagi daftar item menjadi 3 grup, meletakkan item sisanya dalam grup keempat (jika jumlah item tidak habis dibagi 3), dan kemudian akan cocok dengan item pertama di setiap grup.

Sebagai contoh, gambar berikut ini menunjukkan hasil pemilihan li: nth-last-child (3n + 1) dalam daftar item. Ada 11 item dalam daftar, dan kami memiliki = 3, sehingga 11 item akan dibagi dengan 3. 11/3 = 3 + 2, sehingga akan ada dua item yang tersisa yang akan dikelompokkan ke dalam grup terakhir dari item mereka. sendiri. Kemudian, untuk masing-masing dari empat grup, item pertama akan dipilih. Pada gambar berikut, item yang cocok memiliki latar belakang khaki.

Saat meneruskan formula ke: nth-last-child (), browser akan beralih melalui semua anak wadah dan kemudian pilih yang cocok dengan formula. Daftar item diperlakukan sebagai item array, di mana setiap item memiliki indeks yang mungkin cocok atau tidak cocok dengan hasil rumus.

nth-child () adalah pemilih kelas semu CSS yang memungkinkan Kalian memilih elemen berdasarkan indeks (urutan sumber) di dalam wadahnya.

Kalian bisa memberikan angka positif sebagai argumen ke: nth-child (), yang akan memilih satu elemen yang indeksnya di dalam induknya cocok dengan argumen: nth-child (). Sebagai contoh, li: nth-child (3) akan memilih item daftar dengan nilai indeks 3; yaitu, ia akan memilih item daftar ketiga.

Kalian juga dapat memasukkan salah satu dari dua kata kunci yang telah ditentukan: genap dan ganjil. li: nth-child (datar) akan memilih semua item daftar dengan nomor indeks genap (2, 4, 6, 8, dll.), dan li: nth-child (datar) akan memilih semua item daftar dengan nomor indeks ganjil (1 , 3, 5, 7, dll.).

: nth-child () juga memungkinkan Anda memilih satu atau lebih elemen menggunakan rumus (atau persamaan) —an + b — yang diteruskan sebagai argumen. Sintaksnya adalah: nth-child (an + b), di mana Anda mengganti a dan b dengan nilai integer Anda sendiri sehingga, setelah n diganti dengan angka positif (0, 1, 2, 3, dll.), Hasilnya angka adalah indeks elemen yang ingin Anda pilih. Misalnya,: anak ke-3 (3n + 1) akan memilih anak ke-1 (3 * 0 +1 = 1), anak ke-4 (3 * 1 +1 = 4), anak ke-7 (3 * 2 +1 = 7) anak , dll. dan seterusnya.

Apa: n-anak (an + b) yang dilakukan adalah ia membagi anak-anak wadah menjadi elemen (kelompok terakhir mengambil sisanya), dan kemudian memilih elemen ke-b dari setiap kelompok. Jadi, li: nth-child (3n +1) akan membagi item daftar menjadi 3 grup, meletakkan item sisanya dalam grup keempat (jika jumlah item tidak dapat dibagi 3), dan kemudian akan cocok dengan item pertama di masing-masing kelompok.

Misalnya, gambar berikut ini menunjukkan hasil memilih li: nth-child (3n + 1) dalam daftar item. Ada 10 item dalam daftar, dan kami memiliki = 3, sehingga 10 item akan dibagi dengan 3. 10/3 = 3 + 1, sehingga akan ada satu item yang tersisa yang akan dikelompokkan ke dalam grup terakhir dari kelompoknya. sendiri. Kemudian, untuk masing-masing dari empat grup, item pertama akan dipilih. Pada gambar berikut, item yang cocok memiliki latar belakang khaki.

Contoh berikut memilih baris genap dalam tabel dan menerapkan warna latar belakang untuk membuat efek zebra.

Apa itu nth Child () CSS?

Last Child pada CSS untuk apa?