Kekuatan Pola: Menggunakan nth-child
Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 15 dari 43.
Pseudo-class :nth-child() memilih elemen berdasarkan urutannya di dalam parent, menggunakan angka atau pola untuk menentukan elemen yang dipilih.
Contohnya, kita memiliki sebuah list:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>Beginilah cara kita memilih item list bernomor genap:
li:nth-child(even) {
background-color: lightblue;
}Begini cara kita memilih item ke-3:
li:nth-child(3) {
font-weight: bold;
}Begini cara kita memilih setiap item ke-5:
li:nth-child(5n) {
color: red;
}
Tantangan
MudahBuat aturan CSS menggunakan :nth-child() untuk memberikan latar belakang kuning pada setiap <div> ketiga.
Coba sendiri
<!DOCTYPE html>
<html>
<head>
<title>Pattern Power: Using nth-child</title>
<style>
/* Write your CSS rule here */
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
</body>
</html>
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Menguasai CSS
1Menguasai Selector, Kombinasi
PengantarSelector KeturunanSelector AnakSelector Saudara SebelahSelector Saudara UmumTantangan Rangkuman7Membangun dengan CSS Grid
Dasar-Dasar GridPenempatan Item dengan grid-rowArea BernamaTantangan Rangkuman3pseudo-class struktural
pseudo-class strukturalMemilih Anak PertamaMemilih Anak TerakhirKekuatan Pola: Menggunakan nth-childTantangan RangkumanLatihan sendiri: Playground Web