ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Memahami :nth-last-child, Selector Untuk Urutan Element

Pada kesempatan sebelumnya telah kita bahas secara detail mengenai pseudo class :nth-child, pada kesempatan kali ini kita akan bahas pseudo class selector :nth-last-child. Pseudo class ini sama persis dengan pseudo class :nth-child, bedanya hanya satu yaitu urutan dimulai dari element terakhir.

Pseudo Class :nth-last-child

Seperti namanya, selector ini akan menseleksi element html (seperti: div, p, article, dll) ke nth (1th, 2th, 3th, dst..) yang posisinya sebagai children terhadap parent yang sama, dimana urutannya dihitung mulai dari element terakhir. Jangan terkecoh dengan istilah child karena semua element pada dasarnya adalah chidren (kecuali <body>), setidaknya terhadap parent utama yaitu <body>.

Seperti pada pseudo class yang berjenis “structural pseudo-class“, selector akan menseleksi element children dari tiap-tiap parent yang ada di dalam suatu group element, perhatikan contoh berikut:

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

Struktur HTML nya:

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

CSS rule nya:

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

Pada contoh diatas,  :nth-last-child akan berpengaruh ke semua element li yang memiliki parent ul, di semua level kedalaman.

Argumen Pada Pseudo Class :nth-last-child

Seperti pada selector :nth-child, selector ini menerima tiga jenis argumen yaitu keyword, angka, dan formula. Pada pembahasan penggunaan argumen (dibahas di bagian bawah) kita akan menggunakan struktur HTML:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
</ul>
    1. Keyword. Argumen ini terdiri dari odd(ganjil) dan even(genab), contoh :nth-last-child(odd) akan menseleksi element ke 1,3,5,dst dan :nth-last-child(even) yang akan menseleksi element ke 2, 4, 6, dst dihitung mulai dari element terakhir.
      Misal:

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      li:nth-last-child(odd) {
      	background-color: #6FA9FF;
      }
    2. Numeric (angka), yang akan menseleksi element yang posisinya sesuai dengan angka yang ada pada argumen, posisi tersebut dihitung mulai dimulai dari element terakhir.
      Misal:

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      li:nth-last-child(3) {
      	background-color: #6FA9FF;
      }
    3. Formula. Formula ditulis menggunakan format an+b, dimana (1) a merupakan angka, (2) n tetap sebagai huruf n yang mencerminkan suatu urutan dimulai dari angka 0, angka selanjutnya bisa bernilai negatif -0,-1,-2, dst.. atau positif 0,1,2,dst… (3) operator bisa + atau -, dan (4) b merupakan angka yang digunakan jika formula menggunakan operator. Contoh::nth-last-child(n+5) akan menseleksi element (urut dari belakang):  0(0+5) – tidak digunakan, 6(1+5), 7(2+5), 8(3+5), dst…
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      li:nth-last-child(n+5) {
      	background-color: #6FA9FF;
      }

      :nth-last-child(-n+3) akan menseleksi element (urut dari belakang): 3(-0+3) , 2(-1+3), dan 1(-2+3)

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      li:nth-last-child(-n+3) {
      	background-color: #6FA9FF;
      }

      :nth-last-child(n+3):nth-last-child(-n+5) akan menseleksi element yang memenuhi kedua kriteria tersebut yaitu element ke 3,4,5,6,dst… dan 5,4,3,2,dst… sehingga yang terseleksi element ke 3,4, dan 5

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      li:nth-last-child(n+3):nth-last-child(-n+5) {
      	background-color: #6FA9FF;
      }

      :nth-last-child(3n+1), akan menseleksi element (urut dari belakang) 1(3×0 + 1), 4(3×1 + 1 ), 7(3×2 + 1), dst…

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      li:nth-last-child(3n+1) {
      	background-color: #6FA9FF;
      }

Browser support

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

Sumber: Mozilla Developer Network

Kesimpulan

Pseudo class selector :nth-last-child berfungsi sama dengan pseudo class :nth-child, bedanya urutan dihitung mulai element terakhir. Meski mungkin jarang digunakan, pada kondisi tertentu kita tetap membutuhkannya, seperti ketika menyesuaikan padding thumbnail gallery, oleh karena itu setidaknya kita mengetahui nama dan fungsi selector ini.

Demikian tutorial mengenai pseudo class selector :nth-last-child, semoga 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

Recomended Post

Silakan tinggalkan komentar

*

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Like Us

  1. Memahami Tipe Data Pada PHP

  2. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  3. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  4. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  5. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  6. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  7. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  8. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  9. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  10. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP