NEW!! Buku Query MySQL Lihat Detail » x

Memahami :nth-of-type, selector untuk urutan element

Sebelumnya telah kita bahas berbagai selector terkait urutan element pada dokumen HTML, pada kesempatan kali ini kita akan membahas mengenai pseudo class selector :nth-of-type, selector ini sama dengan selector :nth-child, baik bentuk dan fungsinya, bedanya selector ini diperuntukkan hanya untuk element dengan tipe yang sama, tipe yang dimaksud adalah tag HTML itu sendiri (seperti div, p, ul, dll).

Pseudo Class Selector :nth-of-type

Sesuai namanya, selector ini akan menseleksi element ke nth artinya element ke 1th, 2th, 3th, dst… untuk tiap-tiap element children yang memiliki tipe sama dan memiliki parent yang sama yang ada pada suatu group element. perhatikan contoh berikut:

  • List 1
  • List 2
  • List 3
    Div 1

    P 1

    Div 2

    P 2

  • List 4
    • List 5
    • List 6
    • List 7
      DIV 3

      P 3

      DIV 4

      P 4

  • List 8

CSS Rule:

.top-class div:nth-of-type(2) {
	color: red;
}
.top-class li:nth-of-type(2) {
	color: blue;
}
.top-class p:nth-of-type(1) {
	color: yellow;
}

Pada contoh diatas, element paling atas adalah <ul class=”top-class”> dan terlihat bahwa style css akan mempengaruhi element <div>, <li>, dan <p> pada semua level kedalaman.

Penggabungan selector

Seperti pada selector umumnya, selector ini juga dapat digabungkan dengan selector lain maupun selector :nth-of-type  sendiri, sebagai contoh: div:nth-of-type(n+2):nth-of-type(-n+4) yang akan menseleksi khusus element <div> yang memenuhi kedua argumen baik (n+2) maupun (-n+4).

Argumen

Seperti pada selector lainnya yang diawali dengan :nth-, selector ini juga menerima tiga macam argumen, yaitu: keyword, numeric, dan formula. Sebagai contoh, kita akan menggunakan  struktur HTML berikut pada contoh penggunaan argumen.

<div>
	<div>DIV 1</div>
	<p>P 1</p>
	<div>DIV 2</div>
	<p>P 2</p>
	<div>DIV 3</div>
	<p>P 3</p>
	<div>DIV 4</div>
	<p>P 4</p>
	<div>DIV 5</div>
</div>
  1. Keyword. Sama seperti lainnya, keyword yang dapat digunakan untuk argumen pada selector ini adalah odd (ganjil) dan even (genab). Dengan argumen ini selector akan menseleksi element dengan tipe yang sama yang menempati urutan ganjil (odd) atau genab (even), misal :nth-of-type(odd) atau :nth-of-type(even)
    DIV 1

    P 1

    DIV 2

    P 2

    DIV 3

    P 3

    DIV 4

    P 4

    DIV 5
    .sample1 div:nth-of-type(odd) {
    	background-color: #6FA9FF;
    }
  2. Numeric. Numeric yang digunakan sama dengan selector :nth- lainnya yaitu angka dengan nilai paling kecil 1. Dengan argumen ini, selector akan menseleksi element dengan tipe sama yang berada pada urutan sesuai dengan nilai yang diberikan. Misal:
    DIV 1

    P 1

    DIV 2

    P 2

    DIV 3

    P 3

    DIV 4

    P 4

    DIV 5
    .sample2 div:nth-of-type(4) {
    	background-color: #6FA9FF;
    }
  3. Formula. Formula yang digunakan juga sama dengan selector :nth- lainnya, yaitu berformat an+b, dimana (1) a merupakan angka, (2) n tetap sebagai huruf n, (3) operator, bisa bernilai + maupun -, dan (4) b merupkan angka, yang digunakan jika kita menggunakan operator.
    Misal p:nth-of-type(n+2), akan khusus memilih element <p> dengan urutan ke 2(0+2), 3(1+2), 4(2+2), dst…

    DIV 1

    P 1

    DIV 2

    P 2

    DIV 3

    P 3

    DIV 4

    P 4

    DIV 5
    .sample3 p:nth-of-type(n+2)  {
    	background-color: #6FA9FF;
    }

    Contoh argumen dengan formula -n+3, seperti div:nth-of-type(-n+3) yang akan menseleksi khusus element <div> ke 3(-0+3), 2(-1+3), dan 1(-2+3)

    DIV 1

    P 1

    DIV 2

    P 2

    DIV 3

    P 3

    DIV 4

    P 4

    DIV 5
    .sample4 div:nth-of-type(-n+3) {
    	background-color: #6FA9FF;
    }

    Contoh penggabungan selector dengan argumen berbeda, menggabungkan sample3 dan sample4 sehingga selector menjadi div:nth-of-type(n+2):nth-of-type(-n+4), argumen tersebut akan khusus menseleksi element <div> yang memenuhi kedua argumen dalam selector.

    DIV 1

    P 1

    DIV 2

    P 2

    DIV 3

    P 3

    DIV 4

    P 4

    DIV 5
    .sample5 div:nth-of-type(n+2):nth-of-type(-n+4) {
    	background-color: #6FA9FF;
    }

    Contoh argumen dengan formula 3n+1, seperti p:nth-of-type(3n+1) yang akan menseleksi khusus element <p> dengan urutan ke 1(3×0 + 1), 4(3×1 + 1), 7(3×2 + 1), dst…

    DIV 1

    P 1

    DIV 2

    P 2

    DIV 3

    P 3

    DIV 4

    P 4

    DIV 5
    .sample6 p:nth-of-type(3n+1) {
    	background-color: #6FA9FF;
    }

     

Dukungan browser

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

Pseudo class selector :nth-of-type merupakan salah satu pseudo class yang hadir mulai CSS 3, meskipun dalam paktek jarang digunakan, pada situasi tertentu terkadang kita memerlukan selector ini, oleh karena itu tidak ada salahnya kita mempelajarinya.

Demikian tutorial mengenai pseudo selector :nth-of-type semoga bermanfaat
Salam JWD

Recomended Post

Silakan tinggalkan komentar

*

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Query MySQL di Dalam PHP Loop – Bad Practice !!!

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

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

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

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

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

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

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

  9. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  10. Menghitung Selisih Waktu Dengan PHP – Cara Termudah