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

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