Jagowebdev

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:

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

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.

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

10 Feedback dari pembaca

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Social

  1. Tutorial Grocery CRUD Lengkap
  2. Implementasi HMVC Pada Codeigniter 4
  3. Trik Coding Cepat dan Efisien Pada PHP
  4. PHP Admin Template Dashboard
  5. Prefix Tabel Pada Database, Perlukah?
  6. Same Origin Policy – Apa dan Bagaimana Mengatasinya?
  7. JSONP Dengan Javascript dan jQuery – Lintas Domain
  8. JSON Pada Javascript – Panduan Lengkap
  9. JSON Pada Dokumen HTML
  10. JSON Dari Database – PHP dan MySQL

Kategori