Cara menggunakan nth-child css adalah

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

Versi:CSS3

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


Cara menggunakan nth-child css adalah

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;
}

Cobalah sendiri "


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:

Pseudoclass dapat digunakan untuk memilih item tertentu dari daftar. Dalam pelajaran ini, kami akan menceritakan tentang pseudoclass: NTH-Child, yang dapat dibuat menggunakan kelas pseudo ini dan apa yang bisa bermanfaat. Pseudo-Class: NTH-Child memungkinkan Anda memilih grup elemen dengan sifat umum. Ini paling sering digunakan untuk memilih item genap atau ganjil dari grup. Ini sering digunakan agar tabelnya terlihat seperti zebra, menetapkan berbagai warna latar belakang dengan baris genap dan ganjil.

TR: NTH-ANAK (ODD) (// Latar Belakang Warna) TR: NTH-Child (Even) (// Latar Belakang Lainnya)

Kelas pseudo lain: NTH-ANGHAR memungkinkan Anda membagi elemen dengan properti umum ke grup dan kemudian memilih item tertentu dari setiap grup menggunakan sintaks berikut:

TR: NTH-ANAK (AN + B) ()

Sini sEBUAH. menentukan jumlah elemen dalam grup, dan dgn B. Menentukan elemen mana dari grup yang akan dipilih. Jika menggunakan nilainya 2n + 1.Elemen-elemen akan dibagi menjadi kelompok dua, dan elemen pertama dari masing-masing kelompok akan dipilih, I.E., elemen dengan nomor urutan ganjil. Jika menggunakan nilainya 2n + 2.Elemen-elemen akan kembali dibagi menjadi beberapa kelompok, tetapi sekarang elemen kedua dari masing-masing kelompok akan dipilih, I.E., elemen dengan nomor urutan genap.

Sebagai contoh, untuk pemahaman pseudoclass: Nth-child, kita akan memilih setiap elemen keempat dengan itu, yaitu, yang keempat, kedelapan, kedua belas, keenam belas, dll. Untuk melakukan ini, kita membagi elemen menjadi empat kelompok dan kemudian Pilih setiap elemen keempat.

TR: NTH-ANAK (4N + 4) (// Atur gaya untuk setiap elemen keempat)

Di bawah ini adalah daftar sepuluh elemen, dan kami akan menggunakan pseudo-kerah: Nth-child ,: Anak-anak pertama dan: anak terakhir untuk memilih item yang ingin kami sorot.

Menggunakan CSS Pseudo-Classes: NTH-Child untuk memilih satu-satunya elemen

Mengatur kelas pseudo: Nilai NTH-ANAK dalam bentuk angka, Anda dapat memilih ke keturunan dari grup untuk menghubungi:

Elemen 1.
Elemen 2.
Elemen 3.
Elemen 4.
Elemen 5.
Elemen 6.
Elemen 7.
Elemen 8.
Elemen 9.
Elemen 10.

#selector_example Li: Nth-child (4) (ukuran font: 150

Menggunakan Pseudolass CSS: NTH-Child untuk memilih semua elemen kecuali lima pertama

Jika Anda menetapkan pseudolass: Nilai NTH-ANAK dalam formulir n +. Nomor, Anda dapat memilih semua item mulai dari item dengan nomor urutan ini:

Elemen 1.
Elemen 2.
Elemen 3.
Elemen 4.
Elemen 5.
Elemen 6.
Elemen 7.
Elemen 8.
Elemen 9.
Elemen 10.

#Selector_example Li: Nth-child (N + 6) (ukuran font: 150 %; Font-weight: Bold; Warna: Hijau; )

Menggunakan Pseudolass CSS: NTH-Child untuk memilih hanya lima elemen pertama

Ketika kami meminta pseudolass: nilai ke-n-anak dalam bentuk negatif n +. Nomor, kami memilih semua item ke elemen dengan nomor urutan ini:

Elemen 1.
Elemen 2.
Elemen 3.
Elemen 4.
Elemen 5.
Elemen 6.
Elemen 7.
Elemen 8.
Elemen 9.
Elemen 10.

#Selector_example Li: Nth-child (-n + 5) (ukuran font: 150 %; Font-weight: Bold; Warna: Hijau; )

Menggunakan Pseudolass CSS: NTH-Child untuk memilih setiap elemen ketiga

Pseudo-Class: NTH-Child dapat digunakan untuk memilih urutan elemen dengan menentukan berapa banyak elemen dalam urutan dan nomor urutan item yang diinginkan. Jika Anda menetapkan nilainya 3N + 1., setiap elemen ketiga akan dipilih, mulai dari yang pertama:

Elemen 1.
Elemen 2.
Elemen 3.
Elemen 4.
Elemen 5.
Elemen 6.
Elemen 7.
Elemen 8.
Elemen 9.
Elemen 10.

#Selector_example Li: Nth-child (3n + 1) (ukuran font: 150 %; Font-weight: Bold; Warna: Hijau; )

Menggunakan Pseudolass CSS: NTH-Child untuk memilih hanya item ganjil

Anda dapat mengatur pseudolass: Nilai NTH-Nilai ganjil (aneh) untuk memilih semua item dengan nomor urutan ganjil. Itu., Yang pertama, ketiga, kelima, ketujuh, kesembilan, dll. Elemen. Sangat nyaman untuk mengatur warna dengan barisan meja tetangga.

Elemen 1.
Elemen 2.
Elemen 3.
Elemen 4.
Elemen 5.
Elemen 6.
Elemen 7.
Elemen 8.
Elemen 9.
Elemen 10.

#selector_example Li: Nth-child (Odd) (ukuran font: 150 %; Font-weight: Bold; Warna: Hijau; )

Menggunakan Pseudolass CSS: NTH-Child untuk memilih hanya elemen genap

Contoh ini menunjukkan hal yang sama dengan masa lalu, tetapi kali ini semua elemen dengan angka urutan yang bahkan dipilih. Itu., Kedua, keempat, keenam, delapan, sepersepuluh, dll. Elemen:

Elemen 1.
Elemen 2.
Elemen 3.
Elemen 4.
Elemen 5.
Elemen 6.
Elemen 7.
Elemen 8.
Elemen 9.
Elemen 10.

#selePector_Example Li: Nth-child (even) (ukuran font: 150 %; Font-weight: Bold; Warna: Hijau; )

Menggunakan PSS CSS: anak pertama untuk memilih elemen pertama

Kelas pseudo lain: anak pertama akan memilih elemen pertama:

Elemen 1.
Elemen 2.
Elemen 3.
Elemen 4.
Elemen 5.
Elemen 6.
Elemen 7.
Elemen 8.
Elemen 9.
Elemen 10.

#Selector_example Li: anak pertama (ukuran font: 150 %; Font-weight: Bold; Warna: Hijau; )

Menggunakan Pseudolass CSS: anak terakhir untuk memilih elemen terakhir

Selain pseudoclass: anak pertama adalah pseudoclass: anak terakhir, yang akan memilih elemen terakhir dari kelompok elemen:

Elemen 1.
Elemen 2.
Elemen 3.
Elemen 4.
Elemen 5.
Elemen 6.
Elemen 7.
Elemen 8.
Elemen 9.
Elemen 10.

#Selector_example Li: anak terakhir (ukuran font: 150 %; Font-weight: Bold; Warna: Hijau; )

Menggunakan Pseudolass CSS: NTH-LES-ANAK untuk memilih item kedua dari belakang

Anda masih dapat menggunakan kelas pseudo: NTH-anak terakhir, yang menggabungkan kemampuan pseudoclass: anak terakhir dan: Nth-child untuk memulai hitungan mundur elemen dari akhir. Itu., Anda dapat memilih elemen, menghitung angka urutan dari akhir grup, misalnya, dalam kelompok sepuluh elemen, Anda dapat memilih yang kedua dari akhir:

Elemen 1.
Elemen 2.
Elemen 3.
Elemen 4.
Elemen 5.
Elemen 6.
Elemen 7.
Elemen 8.
Elemen 9.
Elemen 10.

#selector_example li: nth-last-child (2) (ukuran font: 150 %; Font-weight: Bold; Warna: Hijau; )

Lihat kemampuan pseudoclass: NTH-Child dengan bantuan

Deskripsi

Pseudo-Class: NTH-Child digunakan untuk menambah gaya ke elemen berdasarkan elemen pohon.

Sintaksis

elemen: Nth-Child (Ganjil | Bahkan |<число> | <выражение>) {...}

Nilai-nilai

Aneh semua elemen ganjil angka. Bahkan semua bahkan jumlah elemen. Jumlah jumlah urutan elemen anak relatif terhadap induknya. Penomoran dimulai dengan 1, itu akan menjadi elemen pertama dalam daftar. Ekspresi diatur dalam bentuk AN + B, di mana bilangan bulat A dan B, dan N - penghitung yang secara otomatis mengambil nilai 0, 1, 2 ...

Jika A adalah nol, itu tidak ditulis dan catatan dikurangi menjadi b. Jika b adalah nol, itu juga tidak ditentukan dan ekspresi ditulis dalam bentuk a. A dan B mungkin angka negatif, dalam hal ini tanda plus berubah menjadi minus, misalnya: 5n-1.

Karena penggunaan nilai negatif A dan B, beberapa hasil juga dapat negatif atau sama dengan nol. Namun, hanya nilai-nilai positif yang mempengaruhi elemen-elemen karena fakta bahwa penomoran elemen dimulai dengan 1.

Di tab. 1 menunjukkan beberapa ekspresi dan kata kunci yang mungkin, dan juga menentukan jumlah elemen mana yang akan terlibat.

Html5 css3 yaitu cr op sa fx

21342135213621372138Minyak1634627457Emas469725647Kayu773793486Batu23348853103

Dalam contoh ini, kelas pseudo: n-nth-child digunakan untuk mengubah gaya baris pertama tabel, serta untuk menyoroti warna semua baris bahkan (Gbr. 1).

Di CSS ada pemilih, agar lebih akurat, pemilih pseudo bernama NTH-Child. Contoh penggunaannya:

UL LI: NTH-ANAK (3N + 3) (Warna: #ccc;)

CSS di atas membuat yang berikut: BERLAKU gaya untuk setiap elemen ketiga dari daftar yang tidak diukur. Yaitu dari tanggal 3, 6, 9, 12, dll. Tetapi bagaimana cara kerjanya? Dan juga manfaat apa yang bisa saya hapus menggunakan nth-child?

Arti utama adalah mengekspresikan dalam tanda kurung. NTH-Child mengambil dua kata kunci: bahkan. (bahkan) dan aneh. (aneh). Arti dari mereka benar-benar jelas. Bahkan memilih bahkan elemen (2, 4, 6), ganjil - aneh (1, 3, 5).

Seperti yang ditunjukkan pada contoh di atas, NTH-Child dapat memproses ekspresi. Apa ekspresi paling sederhana yang mungkin? Hanya angka. Jika Anda menulis beberapa angka dalam tanda kurung, maka satu elemen tunggal akan dipilih. Misalnya, pilih item daftar kelima:

UL LI: NTH-ANAK (5) (Warna: #ccc;)

Mari kita kembali ke contoh pertama kami di mana kami menggunakan ekspresi (3n + 3). Bagaimana dia bekerja? Mengapa dia memilih setiap elemen ketiga? Seluruh esensi dalam variabel n. Dibutuhkan nilai integer dari nol dan lebih. Mari kita lihat baca selengkapnya:

(3 x 0) + 3 \u003d 3 \u003d 3-IE elemen (3 x 1) + 3 \u003d 6 \u003d 6 elemen (3 x 2) + 3 \u003d 9 \u003d elemen ke-9, dll.

Sekarang mari kita coba ekspresi berikut: Nth-child (2n + 1):

(2 x 0) + 1 \u003d 1 \u003d elemen 1 (2 x 1) + 1 \u003d 3 \u003d 3-IE elemen (2 x 2) + 1 \u003d 5 \u003d 5 elemen, dll.

Akibatnya, mereka juga memiliki hal yang sama seperti dalam kasus aneh, jadi tidak perlu menggunakan ekspresi seperti itu. Selain itu, contoh pertama kami juga dapat disederhanakan dan digunakan alih-alih ekspresi asli (3N + 3), ekspresi (3N):

(3 x 0) + 0 \u003d 0 \u003d Tidak sesuai (3 x 1) + 0 \u003d 3 \u003d 3-и илем (3 x 2) + 0 \u003d 6 \u003d 6 elemen, dll.

Seperti yang Anda lihat, hasilnya sama, tetapi Anda tidak perlu menulis "+3". Kita juga dapat menggunakan nilai negatif dalam ekspresi. Misalnya, 4N-1:

(4 x 0) - 1 \u003d -1 \u003d tidak ada korespondensi (4 x 1) - 1 \u003d 3 \u003d 3-IE elemen (4 x 2) - 1 \u003d 7 \u003d 7 elemen, dll.

Menggunakan nilai negatif untuk koefisien dengan N, terlihat sedikit aneh, karena dalam kasus hasil negatif tidak akan ditemukan kepatuhan. Anda harus terus-menerus mengubah ekspresi untuk menambah elemen positif. Ternyata, pendekatan ini sangat nyaman untuk memilih elemen N pertama. Pertimbangkan contoh dari "-n + 3":

0 + 3 \u003d 3 \u003d 3i elemen -1 + 3 \u003d 2 \u003d elemen 2 -2 + 3 \u003d 1 \u003d 1 elemen -3 + 3 \u003d 0 \u003d tidak cocok

Crossboxrity.

nTH-Child adalah salah satu atribut paling tidak bahagia yang benar-benar browser lintas, dengan pengecualian nol absolut di IE, bahkan versi ke-8. Oleh karena itu, ketika datang untuk digunakan, maka jika hasil yang diharapkan adalah semacam efek visual (misalnya, pewarnaan baris tabel tertentu) adalah pendekatan yang ideal. Tetapi mungkin tidak perlu menggunakannya untuk sesuatu yang lebih penting, yang dapat mempengaruhi, misalnya, pada kebenaran lapisan.

Tentu saja, jika Anda menggunakan jQuery, maka Anda tidak perlu khawatir tentang ini, karena jQuery bekerja bahkan di Internet Explorer.

Dan akhirnya

Anda dapat bermain dengan ekspresi sektor yang berbeda pada

Pseudo-Class: NTH-Child digunakan untuk menambah gaya ke elemen berdasarkan elemen pohon.

Designations.

DeskripsiContoh<тип>Menentukan jenis nilai.<размер>A && B.Nilai harus ditampilkan dalam urutan yang ditentukan.<размер> && <цвет>A | Dgn B.Menunjukkan bahwa hanya satu nilai dari yang diusulkan (A atau B) yang harus dipilih.normal | Topi kecil.A || Dgn B.Setiap nilai dapat digunakan secara independen atau bersama dengan orang lain dalam urutan sewenang-wenang.lebar || MenghitungNilai grup.[Crop || Menyeberang]*Ulangi nol atau lebih kali.[,<время>]*+Ulangi satu atau lebih kali.<число>+?Jenis yang ditentukan, kata atau grup tidak wajib.sisipan?(A, b)Ulangi setidaknya A, tetapi tidak lebih dari B kali.<радиус>{1,4}#Ulangi satu atau lebih kali melalui koma.<время>#×

Nilai-nilai

aneh semua elemen ganjil angka. Bahkan semua elemen yang tahu.<число> Urutan jumlah elemen putri relatif terhadap orang tuanya. Penomoran dimulai dengan 1, itu akan menjadi elemen pertama dalam daftar.<выражение> Atur dalam bentuk ± B, di mana A dan B adalah bilangan bulat, dan N adalah penghitung yang secara otomatis mengambil nilai 0, 1, 2 ...

Jika A adalah nol, itu tidak ditulis dan catatan dikurangi menjadi b. Jika b adalah nol, itu juga tidak ditentukan dan ekspresi ditulis dalam bentuk a. A dan B mungkin angka negatif, dalam hal ini tanda plus berubah menjadi minus, misalnya: 5n-1.

Karena penggunaan nilai negatif A dan B, beberapa hasil juga dapat negatif atau sama dengan nol. Namun, hanya nilai-nilai positif yang mempengaruhi elemen-elemen karena fakta bahwa penomoran elemen dimulai dengan 1.

Di tab. 1 menunjukkan beberapa ekspresi dan kata kunci yang mungkin, dan juga menentukan jumlah elemen mana yang akan terlibat.

Meja. 1. Hasil untuk berbagai nilai pseudoclassNilaiElemen kamarDeskripsi11Elemen pertama identik dengan pseudoclass: anak pertama.55Elemen kelima.2n.2, 4, 6, 8, 10,…Semua elemen pengetahuan, nilai analog genap.2n + 1.1, 3, 5, 7, 9,…Semua elemen ganjil, nilai analog aneh.3n.3, 6, 9, 12, 15,…Setiap elemen ketiga.3N + 2.2, 5, 8, 11, 14,…Setiap elemen ketiga mulai dari yang kedua.n + 4.4, 5, 6, 7, 8,…Semua elemen kecuali tiga yang pertama.-N + 3.3, 2, 1Tiga elemen pertama.5n-2.3, 8, 13, 18, 23,…—bahkan.2, 4, 6, 8, 10,…Semua elemen yang tahu.aneh.1, 3, 5, 7, 9,…Semua elemen aneh.

Ini diperbolehkan untuk menggabungkan dua kelas pseudo: NTH-Child untuk memilih rentang elemen. Di sini semua elemen dari yang kedua akan dipilih.

: NTH-ANAK (N + 2): NTH-ANAK (-N + 5) (...)

Contoh

21342135213621372138Minyak1634627457Emas469725647Kayu773793486Batu23348853103

Dalam contoh ini, kelas pseudo: NTH-ANAK digunakan untuk mengubah gaya string pertama dari tabel, serta untuk menyoroti warna semua bagian (Gbr. 1).

Ara. 1. Penerapan Pseudoclass: NTH-Child to Table Rows

Spesifikasi

Setiap spesifikasi melewati beberapa tahap persetujuan.

  • Rekomendasi - Spesifikasi disetujui W3C dan direkomendasikan sebagai standar.
  • Rekomendasi kandidat ( Rekomendasi yang mungkin) - Kelompok yang bertanggung jawab atas standar terpenuhi saat memenuhi tujuannya, tetapi bantuan masyarakat pengembangan untuk mengimplementasikan standar diperlukan.
  • Rekomendasi yang diusulkan ( Rekomendasi yang ditawarkan) - Pada tahap ini, dokumen tersebut diserahkan ke Dewan Penasihat W3C untuk persetujuan akhir.
  • Working Draft (proyek kerja) adalah versi yang lebih matang dari draft setelah diskusi dan amandemen untuk dipertimbangkan oleh masyarakat.
  • RUANG EDITOR ( Editorial Chernovik.) - Versi kasar dari standar setelah membuat editor oleh editor proyek.
  • MINUMAN ( Spesifikasi Chernovik) - Versi hitam pertama dari standar.
×

Saya menyambut Anda di blog saya. Saya ingin menulis hari ini pada topik bagaimana memilih elemen pertama dari induk di CSS, karena memungkinkan Anda untuk menggunakan kelas gaya yang lebih sedikit.

Pseudoclass: anak pertama dan tipe pertama apa bedanya?

Untuk mengajukan banding ke elemen pertama dari wadah induk di CSS, dua kelas pseudo ditemukan. Saya langsung menyarankan untuk mempertimbangkan semuanya pada contoh sehingga Anda mengerti:

Ini paragraf

Ini paragraf

Ini paragraf

Ini paragraf

Ini paragraf

Misalkan kita memiliki tanda seperti itu. Tujuannya adalah untuk menghubungi paragraf pertama dan mempercepatnya secara terpisah dari orang lain tanpa menambahkannya ke kelas. Ini bisa dilakukan seperti ini:

#Wrapper P: anak pertama (
Warna merah;
}

Warna paragraf pertama akan berwarna merah, Anda dapat memeriksa.

#wrapper P: tipe pertama (
Warna merah;
}

Itu akan terjadi sama. Jadi apa bedanya? Dan itu terletak pada kenyataan bahwa elemen pertama dari elemen pertama induk, mengingat tipenya, dan anak pertama sedang mencari apa-apa - dia hanya mengambil elemen pertama dari induk dan jika itu adalah paragraf, lalu berlaku gaya untuk itu. Jika tidak, maka tidak ada yang akan dipilih dan tidak berlaku.

Ini paragraf

Ini paragraf

Ini paragraf

Ini paragraf

Ini paragraf

Dan sekarang pikirkan: Apakah pekerjaan tipe pertama dalam hal ini? Ya, karena itu memperhitungkan jenis elemen dan memilih paragraf pertama, dan bukan yang pertama dari semua elemen secara umum. Dan anak pertama akan bekerja? Mencoba. Tidak ada yang akan berhasil, karena paragraf tidak memiliki elemen pertama di induk.

Secara pribadi, saya tidak segera memahami perbedaan antara kelas pseudo ini dan bingung untuk beberapa waktu, tetapi sekarang saya harap Anda menjelaskan kepada Anda secara normal.

Detail penting lainnya

Hitung mundur elemen justru dari elemen induk, jadi jika Anda menentukan seperti ini:

LI: tipe pertama (

}

Itu akan memilih daftar pertama dalam tag tubuh (yaitu, di seluruh halaman). Dengan demikian, dalam daftar apa pun, item pertama akan dikeluarkan secara berbeda.
Jika Anda menulis seperti ini:

#Sidebar li: tipe pertama (

}

Hanya poin pertama daftar di Sidbar yang akan dipilih, yaitu, kolom samping di situs web kami.

Menggunakan berbagai pemilih yang saya tulis, Anda dapat mencapai hampir semua item di halaman web. Dalam artikel ini, Anda dapat membaca lebih lanjut tentang cara bekerja dengan pseudolass NTH-ANAK di CSS dan memberikan peluang dalam hal memilih elemen.

Ngomong-ngomong, saya lupa menyebutkan lawan pseudo-kerah - anak-anak terakhir (dan jenis terakhir, masing-masing). Mereka memungkinkan Anda untuk memilih elemen terakhir dari wadah induk.

Di mana Anda dapat menggunakan dalam praktek

Saya menulis tentang kelas pseudo ini karena mereka secara aktif digunakan ketika bertahan menggunakan CSS. Di sini Anda memiliki halaman, misalnya, blok entri serupa, atau komentar, atau sesuatu yang lain. Dan Anda memiliki ide untuk membuat masalah khusus elemen pertamanya. Dan mungkin yang terakhir. Dan secara umum, siapa pun bisa.

Anda hanya perlu mengetahui nama blok di mana barang yang diinginkan disimpan. Misalkan kita berurusan dengan catatan populer. Wadah orang tua memiliki kelas yang populer. Lalu kami menulis seperti ini:

Li populer: tipe pertama (
Padding-TOP: 20px;
}

Semuanya, daftar pertama daftar di dalamnya menerima lekukan dari atas, dan Anda dapat menambahkan semuanya dalam gaya yang Anda inginkan.

Apa itu nth Child () CSS?

Yang dimaksud nth-child adalah selector yang digunakan untuk memberikan property pada tag atau class yang yang ada pada urutan tertentu.

Last Child pada CSS untuk apa?

Pseudo class tersebut baru diperkenalkan pada CSS 3, digunakan untuk menseleksi element children yang berada pada urutan terakhir. Element children ini berlaku untuk tiap-tiap parent yang ada di dalam suatu group element.