:nth-child dan :nth-of-type
Pilih elemen berdasarkan posisinya dalam induk menggunakan rumus nth dan pemilih tipe.
:nth-child dan :nth-of-type adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Apa Itu Kelas Semu Struktural?
Kelas semu struktural memilih elemen berdasarkan posisinya di dalam elemen induk. Kelas semu ini menghilangkan kebutuhan untuk menambahkan kelas atau JavaScript guna menargetkan elemen anak tertentu.
:first-child dan :last-child
Memilih anak pertama atau terakhir dari suatu elemen induk:
<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>
Dasar-Dasar :nth-child()
:nth-child(n) memilih elemen berdasarkan posisinya (diindeks mulai 1) di antara elemen saudara dari jenis apa pun.
<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>
:nth-child() dengan Kata Kunci
Gunakan kata kunci odd atau even untuk menata baris secara bergantian:
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
:nth-child() dengan Rumus
Gunakan rumus An+B, dengan A sebagai langkah dan B sebagai offset. n dimulai dari 0 dan bertambah.
3n— setiap item ketiga (3, 6, 9...)3n+1— item pertama dari setiap tiga item (1, 4, 7...)-n+3— hanya tiga item pertama
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
:nth-of-type()
:nth-of-type() hanya menghitung elemen saudara dari jenis elemen yang sama dan mengabaikan elemen lainnya. Hal ini penting ketika beberapa jenis elemen digunakan bersama.
<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>
:first-of-type dan :last-of-type
Memilih elemen pertama atau terakhir dari jenis tag tertentu di antara elemen saudara:
<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />
:nth-child vs :nth-of-type
Perbedaan utama:
p:nth-child(2)— memilih anak kedua JIKA anak tersebut merupakan<p>p:nth-of-type(2)— memilih<p>kedua tanpa memedulikan elemen lainnya
:only-child dan :only-of-type
:only-child memilih elemen yang merupakan satu-satunya anak dari elemen induknya. :only-of-type memilih elemen yang merupakan satu-satunya elemen dari jenisnya di dalam elemen induk.
<div><p>I'm the only child in this div.</p></div>
:nth-child dengan Pemilih of S (Modern)
CSS modern memungkinkan penyaringan elemen yang dihitung oleh rumus nth menggunakan :nth-child(An+B of selector):
<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>
Praktik: Jarak Grid pada Baris Terakhir
Hapus margin bawah pada elemen terakhir yang terlihat:
<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
Cek Cepat
Pemilih mana yang menargetkan setiap item daftar ketiga, dimulai dari item pertama?
Ringkasan
:nth-child() menghitung semua elemen saudara berdasarkan posisi; :nth-of-type() hanya menghitung elemen saudara dari tag yang sama. Gunakan odd/even untuk tabel bergaris belang. Rumus An+B memungkinkan pola yang kuat seperti "setiap item ketiga" atau "lima item pertama" tanpa menambahkan kelas.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “:nth-child dan :nth-of-type” gratis?
Ya — teks lengkap “:nth-child dan :nth-of-type” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “:nth-child dan :nth-of-type”?
Pilih elemen berdasarkan posisinya dalam induk menggunakan rumus nth dan pemilih tipe. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “:nth-child dan :nth-of-type” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- :hover :focus :active dan :visited
- :nth-child dan :nth-of-type
- :not() :is() dan :where()
- :checked :disabled dan Pseudo Form State