Cara menggunakan html parent, child elements

Question

In the HTML DOM (Document Object Model), an HTML document is a collection of nodes with (or without) child nodes.

Table of Contents Show

childNodes vs children
Siblings vs Element Siblings
Return Value
More Examples
Contoh penggunaan pseudo class selector :nth-child
Contoh 1: Membuat warna baris tabel berbeda-beda sesuai urutan
Contoh 2: Membuat warna baris tabel berselang seling (alternate/zebra row)
Contoh 3:Ã‚Â Menyesuaikan paddingÃ‚Â pada gallery
Contoh 4: Membuat warna baris tabel dan kolom berselang seling
Browser support
Subscibe Now

Nodes are element nodes, text nodes, and comment nodes.

Whitespace between elements are also text nodes.

Elements are only element nodes.

childNodes vs children

childNodes returns child nodes (element nodes, text nodes, and comment nodes).

children returns child elements (not text and comment nodes).

Siblings vs Element Siblings

Siblings are "brothers" and "sisters".

Siblings are nodes with the same parent (in the same childNodes list).

Element Siblings are elements with the same parent (in the same children list).

Syntax

Return Value

TypeDescriptionObjectA HTMLCollection object.
The collection of element nodes.
The elements are sorted as they appear in the document.

More Examples

How many children does "myDIV" have:

let count = document.getElementById("myDIV").children.length;

Try it Yourself »

Change the background of the second child element of "myDIV":

const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";

Try it Yourself »

Get the text of the third child element (index 2) of a element: const collection = document.getElementById("mySelect").children[2].text; Try it Yourself » Loop all children of and change their background: const collection = document.body.children; for (let i = 0; i < collection.length; i++) { collection[i].style.backgroundColor = "red";} Try it Yourself » Browser Support element.children is a DOM Level 1 (1998) feature. It is fully supported in all browsers: Chrome Edge Firefox Safari Opera IE Yes Yes Yes Yes Yes 9-11

Pseudo class selector

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

0Ã‚Â 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

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

1), karena semuanya menginduk ke parent

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

1

Seperti pada pseudo class

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

3 dan

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

4, 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

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

0 dapat digabungkan dengan selector lain, termasuk selector

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

0 itu sendiri, sehingga memenuhi kriteria formula yang diinginkan, misal

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

7, Ã‚Â akan menseleksi element yang memenuhi kriteriaÃ‚Â

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

8 danÃ‚Â

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

9

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

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

0. Sesuai artinya, argumen ini akan menseleksi semua element yang berada diÃ‚Â urutanÃ‚Â ganjil (1, 3, 5, 7, dst..)

Keyword even, misal

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

1. 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

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

2, akan menseleksi element yang berada pada urutan ke-1,Ã‚Â Ã‚Â

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

3, 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:

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

4, akan menseleksi elementÃ‚Â ke 0 (2x0) – tidak digunakan, 2(2x1), 4(2x2), 6(2x3), dst atau seperti kita menggunakan keyword evenÃ‚Â yang berarti genap.

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

5, 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.

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

6), 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.

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

7, 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.

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

8, 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

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

0 dan biasanya terkaitÃ‚Â tabel atau data grid,Ã‚Â berikut ini ada terdapat beberapaÃ‚Â contoh penggunaan pseudo class

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

0 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:

NoNamaNilai1Nama A102Nama B9.53Nama C84Nama D75Nama E66Nama F57Nama G48Nama H39Nama I510Nama J5

Perhatikan bahwa kita juga menggunakan selector

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

4 dan

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

3 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

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

0, 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:

NoNamaNilai1Nama A102Nama B9.53Nama C84Nama D75Nama E66Nama F57Nama G48Nama H39Nama I510Nama J5

Css pada baris 23:Ã‚Â

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

4 yang membuat warna baris dengan urutan genabÃ‚Â menjadi berwarna abu-abu sehingga tampak berselang seling.

Contoh 3:Ã‚Â Menyesuaikan paddingÃ‚Â pada gallery

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:Ã‚Â

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

5, yang berarti margin kanan dan bawah sebesar 7px, masih ditambah padding dari element ul sebanyak 10px, pada kondisi ini, pseudo class

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

0 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

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

7 dan

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

8 bukan

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

9, 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

Desktop
Mobile

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafariBasic support1.03.5 (1.9.1)9.09.53.1

FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileBasic support2.11.0 (1.9.1)9.09.53.1

Sumber:

Kesimpulan

Penggunaan pseudo class selector

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

0 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

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

0Ã‚Â 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.

kode html

Cara menggunakan html parent, child elements

childNodes vs children

Siblings vs Element Siblings

Syntax

Return Value

More Examples

Contoh penggunaan pseudo class selector :nth-child

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

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

Contoh 3:Ã‚Â Menyesuaikan paddingÃ‚Â pada gallery

Contoh 4: Membuat warna baris tabel dan kolom berselang seling

Browser support

Kesimpulan

Subscibe Now

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social