ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 11-08-2016

Memahami :nth-child, selector untuk urutan element

Pseudo class selector :nth-child memungkinkan kita untuk menseleksi child element berdasarkan urutan tertentu terhadap parent nya. Sesuai namanya selector ini akan menseleksi nth child element, yang dalam bahasa Inggris mungkin kita sudah familiar dengan istilah 3th, 5th, dst. Jangan terkecoh dengan istilah child, karena pada dasarnya semua element adalah child (kecuali <body>), karena semuanya menginduk ke parent <body>

Seperti pada pseudo class :first-child dan :last-child, selector ini akan menseleksi element children dari tiap-tiap parent yang ada di dalam suatu group, perhatikan contoh berikut:

  • List 1
  • List 2
    • List 3
    • List 4
  • List 5
    • List 6
    • List 7
  • List 8

Struktur HTML nya:

<ul class="sample-nth">
	<li>List 1</li>
	<li>List 2
		<ul>
			<li>List 3</li>
			<li>List 4</li>
		</ul>
	<li>List 5</li>
	<li>
		<ul>
			<li>List 6</li>
			<li>List 7</li>
		</ul>
	</li>
	<li>List 8</li>
</ul>

Css yang kita gunakan:

.sample-nth li:nth-child(1) {
	color: blue;
}
.sample-nth li:nth-child(2) {
	color: red;
}

Penggabungan Selector

Seperti selector lainnya penulisan selector :nth-child dapat digabungkan dengan selector lain, termasuk selector :nth-child itu sendiri, sehingga memenuhi kriteria formula yang diinginkan, misal :nth-child(n+3):nth-child(-n+7),  akan menseleksi element yang memenuhi kriteria (n+3) dan (-n+7)

Argumen

Selector ini dapat diisi berbagai argumen sesuai dengan kebutuhan, adapun argumen yang dapat diterima adalah keyword, numeric, dan formula (dengan format ab+n).

1. Argumen Keyword pada selector :nth-child

Keyword yang dapat digunakan untuk selector ini adalah odd dan even:

  • Keyword odd, misal :nth-child(odd). Sesuai artinya, argumen ini akan menseleksi semua element yang berada di urutan ganjil (1, 3, 5, 7, dst..)
  • Keyword even, misal :nth-child(even). Kebalikan dari even, argumen ini akan menseleksi semua element yang berada pada urutan genab (2, 4, 6, 8, dst..)

2. Argumen Numeric/Angka pada selector :nth-child

Keyword selanjutnya dalah angka (numeric). Argumen ini akan menseleksi element yang berada pada urutan sesuai dengan angka yang ada pada argumen. Nilai angka paling kecil adalah 1, maksimal tidak terbatas, dan tidak bisa menggunakan angka negatif. Contoh :nth-child(1), akan menseleksi element yang berada pada urutan ke-1,  :nth-child(2), urutan ke-2, dst. Jika argumen bernilai 0, negatif atau melebihi jumlah element yang ada, maka selector akan mengabaikannya.

3. Argumen Formula pada selector :nth-child

Seperti telah disebutkan sebelumnya, formula yang digunakan menggunakan pola an+b, dimana:

  • a merupakan angka(numeric) dan n tetap berupa huruf n. n merupakan urutan angka yang dimulai dari 0, angka selanjutnya bisa bernilai positif, bisa negatif.
  • tanda + merupakan operator, bisa plus (+) maupun minus (-),
  • b merupakan angka, yang digunakan jika formula yang ditulis mengandung operator (+ maupun -).

Contoh panggunaan formula:

  • :nth-child(2n), akan menseleksi element ke 0 (2x0) – tidak digunakan, 2(2x1), 4(2x2), 6(2x3), dst atau seperti kita menggunakan keyword even yang berarti genap.
  • :nth-child(2n+1), akan menseleksi element ke 1 (2x0 + 1), 3(2x1 + 1), 5(2x2 + 1), 7(3x3 + 1), dst atau seperti kita menggunakan keyword odd yang berarti ganjil.
  • :nth-child(n+3), akan menseleksi element ke 3 (0+3), 4 (1+3), 5(2+3), 6(3+3), dst. Jadi :nth-child(n+3) akan menseleksi element ke-3 dan seterusnya.
  • :nth-child(-n+5), akan menseleksi element ke 5 (-0+5), 4 (-1+5), 3(-2+5), 2(-3+5), dan 1(-4+5), jika diteruskan, nilai yang didapatkan 0 dan negatif (tidak digunakan). Jadi :nth-child(-n+5) akan menseleksi 5 element pertama.
  • :nth-child(n+3):nth-child(-n+5), akan menseleksi antara element 3 keatas dan 5 kebawah, sehingga akan membentuk irisan, alhasil, element yang terseleksi adalah element ke 3, 4 dan 5.

Contoh penggunaan pseudo class selector :nth-child

Dalam praktek terdapat berbagai kasus yang terkait dengan penggunaan selector :nth-child dan biasanya terkait tabel atau data grid, berikut ini ada terdapat beberapa contoh penggunaan pseudo class :nth-child mulai dari yang paling sederhana hingga yang rumit.

Contoh 1: Membuat warna baris tabel berbeda-beda sesuai urutan

Contoh ini akan membuat warna tertentu pada baris tabel berdasarkan peringkat. Misal kita memiliki 10 peringkat nilai, tiga peringkat pertama kita beri warna hijau, peringkat 5 s.d 7 warna kuning dan 8 kebawah berwarna merah.

Kode HTML

<table class="sample-rank">
<thead>
	<tr><th>No</th><th>Nama</th><th>Nilai</th></tr>
</thead>
<tbody>
	<tr><td>1</td><td>Nama A</td><td>10</td></tr>
	<tr><td>2</td><td>Nama B</td><td>9.5</td></tr>
	<tr><td>3</td><td>Nama C</td><td>8</td></tr>
	<tr><td>4</td><td>Nama D</td><td>7</td></tr>
	<tr><td>5</td><td>Nama E</td><td>6</td></tr>
	<tr><td>6</td><td>Nama F</td><td>5</td></tr>
	<tr><td>7</td><td>Nama G</td><td>4</td></tr>
	<tr><td>8</td><td>Nama H</td><td>3</td></tr>
	<tr><td>9</td><td>Nama I</td><td>5</td></tr>
	<tr><td>10</td><td>Nama J</td><td>5</td></tr>
</tbody>
</table>

Css Rule:

/* Table */
.sample-rank {
	border-collapse:collapse;
	margin:0;
	font-size: 100%;
}
.sample-rank th {
	background-color: #2784C5;
	color: #FFF;
	text-align: center;
	padding: 5px;
	border: 1px solid #6399BE;
}
.sample-rank td {
	padding: 5px 15px;
	border: 1px solid #A5A5A5;
}
/* :nth-child */
.sample-rank tr:nth-child(-n+3) td{
	background-color:#84E084;
}
.sample-rank tr:nth-child(n+4):nth-child(-n+6) td{
	background-color:#FFFFA4;
}
.sample-rank tr:nth-child(n+7) td{
	background-color:#FF7171;
}
/* First and Last */
.sample-rank td:first-child,
.sample-rank td:last-child {
	text-align: right;
}

Hasilnya:

No Nama Nilai
1 Nama A 10
2 Nama B 9.5
3 Nama C 8
4 Nama D 7
5 Nama E 6
6 Nama F 5
7 Nama G 4
8 Nama H 3
9 Nama I 5
10 Nama J 5

Perhatikan bahwa kita juga menggunakan selector :last-child dan :first-child untuk membuat angka pada kolom pertama dan terakhir menjadi rata-kanan.

Contoh 2: Membuat warna baris tabel berselang seling (alternate/zebra row)

Contoh selanjutnya adalah membuat warna baris tabel berselang seling, hal ini biasanya digunakan untuk data table. Pada artikel sebelumnya telah kita bahas cara melakukannya dengan menambahkan class pada setiap row yang digenerate menggunakan php, dengan adanya pseudo class :nth-child, cara tersebut menjadi terlihat tidak praktis dan kode yang dihasilkan tidak “clean”. Melanjutkan contoh sebelumnya mari kita buat warna baris tabel berselang seling. Kita ganti CSS rulenya menjadi:

<div class="sample-grid-container">
	<ul class="sample-grid">
		<li>PRODUK 1</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
	<ul class="sample-grid">
		<li>PRODUK 2</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
	<ul class="sample-grid">
		<li>PRODUK 3</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
	<ul class="sample-grid">
		<li>PRODUK 4</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
	<ul class="sample-grid">
		<li>PRODUK 5</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
</div>

Hasil yang kita peroleh:

No Nama Nilai
1 Nama A 10
2 Nama B 9.5
3 Nama C 8
4 Nama D 7
5 Nama E 6
6 Nama F 5
7 Nama G 4
8 Nama H 3
9 Nama I 5
10 Nama J 5

Css pada baris 23: .sample-rank2 tr:nth-child(even) td yang membuat warna baris dengan urutan genab menjadi berwarna abu-abu sehingga tampak berselang seling.

Melanjutkan contoh pada artikel sebelumnya, kali kali ini akan memuat thumbnail gallery sebanyak sembilan gambar.

HTML:

<ul class="sample-gallery">
	<li>Image 1</li>
	<li>Image 2</li>
	<li>Image 3</li>
	<li>Image 4</li>
	<li>Image 5</li>
	<li>Image 6</li>
	<li>Image 7</li>
	<li>Image 8</li>
	<li>Image 9</li>
</ul>

CSS:

ul.sample-gallery {
	border: 1px solid #CCCCCC;
    margin: 0;
	display: inline-block;
	width: auto;
	text-align: center;
	padding: 10px;
	list-style-type: none;
}
ul.sample-gallery li {
	float: left;
	margin: 0 7px 7px 0;
	width: 85px;
	height: 85px;
	background-color: #CCCCCC;
	line-height: 80px;
}
ul.sample-gallery li:nth-child(3n+1) {
	clear:both;
}

Hasilnya:

pada contoh tersebut jarak antara image dengan garis pada tepi kanan dan bawah terlalu lebar karena selain terdapat margin dari image: margin: 0 7px 7px 0, yang berarti margin kanan dan bawah sebesar 7px, masih ditambah padding dari element ul sebanyak 10px, pada kondisi ini, pseudo class :nth-child bermanfaat, mari kita tambahkan css berikut:

/* Hilangkan margin kanan untuk image ke 3, 6, 9, dst */
.sample-gallery li:nth-child(3n) {
	margin-right: 0;
}
/* Hilangkan margin bawah untuk image ke 7, 8, 9 */ 
.sample-gallery li:nth-last-child(-n+4) {
	margin-bottom: 0;
}

Hasil:

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
  • Image 6
  • Image 7
  • Image 8
  • Image 9

Contoh 4: Membuat warna baris tabel dan kolom berselang seling

Pada contoh ketiga ini kita akan memanipulasi warna baris dan kolom, biasanya sering kita temui pada tabel comparison price yang membandingkan harga suatu produk beserta fitur yang didapatkan. contoh jadinya akan tampak seperti ini:

  • PRODUK 1
  • Fitur 1
  • Fitur 2
  • Fitur 3
  • Fitur 4
  • Fitur 5
  • PRODUK 2
  • Fitur 1
  • Fitur 2
  • Fitur 3
  • Fitur 4
  • Fitur 5
  • PRODUK 3
  • Fitur 1
  • Fitur 2
  • Fitur 3
  • Fitur 4
  • Fitur 5
  • PRODUK 4
  • Fitur 1
  • Fitur 2
  • Fitur 3
  • Fitur 4
  • Fitur 5
  • PRODUK 5
  • Fitur 1
  • Fitur 2
  • Fitur 3
  • Fitur 4
  • Fitur 5

Kode HTML nya:

<div class="sample-grid-container">
	<ul class="sample-grid">
		<li>PRODUK 1</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
	<ul class="sample-grid">
		<li>PRODUK 2</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
	<ul class="sample-grid">
		<li>PRODUK 3</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
	<ul class="sample-grid">
		<li>PRODUK 4</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
	<ul class="sample-grid">
		<li>PRODUK 5</li>
		<li>Fitur 1</li>
		<li>Fitur 2</li>
		<li>Fitur 3</li>
		<li>Fitur 4</li>
		<li>Fitur 5</li>
		<li><input type="button" value="Order"/></li>
	</ul>
</div>

Rule CSS nya:

/* SAMPLE GRID */
.sample-grid-container {
	margin-top: 25px;
	display: table;
    width: 720px;
}
.sample-grid {
	float:left;
    margin: 0;
    padding: 0;
	list-style: none;
	border-bottom: 2px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	text-align: center;
}
.sample-grid input {
	background: #5B8CD4;
    border: 0;
    padding: 7px 15px;
    color: #FFFFFF;
    cursor: pointer;
	margin: auto;
}
/* LIST */
.sample-grid li {
	border: 0;
    padding: 10px 25px;
    margin: 0;
}
.sample-grid li:last-child {
	background-color: #ECECEC !important;
	border-top: 1px solid #CCCCCC;
}
.sample-grid li:nth-child(1) {
	padding: 35px;
	background-color: #989898 !important;
    color: #FFFFFF;
	border-top: 4px solid #808080;
}
.sample-grid li:nth-child(odd) {
	background-color: #F1F1F1;
}
.sample-grid li:nth-child(even) {
	background-color: #FBFBFB;
}
/* COLUMN */
.sample-grid:nth-child(even) li:nth-child(odd) {
	background-color: #EAEAEA;
}
.sample-grid:nth-child(even) li:nth-child(even) {
	background-color: #F5F5F5;
}

/* FEATURE (GREEN) */
.sample-grid:nth-child(3) {
	margin-top: -10px;
	border-bottom: 2px solid #4EB53F;
}
.sample-grid:nth-child(3) input {
	background-color: #49BB39;
}
.sample-grid:nth-child(3) li:last-child {
	padding: 20px;
	background-color: #C5F7BE !important;
	border-top: 1px solid #91E286;
}
.sample-grid:nth-child(3) li:first-child {
	background: #60CC51 !important;
	border-top: 5px solid #4EB53F;
}
.sample-grid:nth-child(3) li:nth-child(even) {
	background-color: #EFFFED;
}
.sample-grid:nth-child(3) li:nth-child(odd) {
	background-color: #BFF7B8;
}

Pada contoh diatas, kita menggunakan element <ul> dan <li> bukan <table>, penggunaan element selain table memungkinkan kita membuat element menjadi responsive,  pada contoh diatas lebar container telah ditentukan yaitu 720px, sehingga tidak responsive, tujuan dari contoh ini agar sobat dapat menggunakanya sebagai ide dasar untuk pengembangan selajutnya.

Browser support

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.1

Sumber: Mozilla Developer Network

Kesimpulan

Penggunaan pseudo class selector :nth-child sangat membantu kita untuk membuat style pada dokumen html terutama terkait urutan element baik yang sederhanya hingga yang rumit sekalipun dapat diselesaikan dengan selector ini, bisa dibayangkan jika kita mendefinisikan class pada tiap element, akan terbayang code yang kita buat menjadi rumit, tidak “clean” dan akan menyusahkan jika ada perbaikan.

Semikian tutorial mengenai penggunaan pseudo class :nth-child  semoga dapat bermanfaat.

Salam JWD.

Recomended Post

4 Feedback dari pembaca

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail