ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 11-08-2016

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. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP
  2. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP
  3. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL
  4. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP
  5. Menghitung Selisih Waktu Dengan PHP – Cara Termudah
  6. Memahami Fungsi Date Pada PHP
  7. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu
  8. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP
  9. Setting ODBC MySQL Untuk Gammu
  10. Cara Install dan Menggunakan Gammu di Windows