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

Pada kesempatan yang lalu telah kita bahas mengenai penggunaan pseudo class :nth-of-type yang digunakan untuk menseleksi beberapa element berdasarkan tipe nya, nah pseudo class  :nth-of-last-type, juga memiliki fungsi yang sama, bedanya selector ini menseleksi element dengan urutan mulai dari element terakhir.

Lebih spesifik, selector ini akan menseleksi element ke nth atau 1th, 2th, 3th, dst… untuk tiap tiap element children dengan kriteria:

• Tipe yang sama (tipe=tag HTML seperti div, p, span, dll)
• Parent yang sama
• Dengan urutan dimulai dari element terakhir.

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-last-of-type(2) {
	color: red;
}
.top-class li:nth-last-of-type(4) {
	color: blue;
}
.top-class p:nth-last-of-type(1) {
	color: yellow;
}

Pada contoh diatas, struktur HTML kita mulai dengan tag <ul class="top-class">, style css akan mempengaruhi element <div>, <li>, dan <p>, pada semua level kedalaman.

Penggabungan element

Seperti pada selector lainnya, selector ini juga dapat digabungkan dengan selector lain temasuk selector :nth-last-of-type sendiri, misal: p:nth-last-of-type(n+2):nth-last-of-type(-n+4) yang akan menseleksi element children yang memenuhi argumen (n+2) dan (-n+4).

Argumen Pada :nth-last-of-type

Seperti  pseudo class selector lain yang diawali dengan :nth-, pseudo class ini juga menerima tiga jenis argumen yaitu keyword, numeric, dan formula.

1. Keyword. Sama seperti pseudo class :nth- lainnya, keyword  yang dapat digunakan untuk selector ini adalah odd dan even, misal p:nth-last-of-type(odd) yang akan menseleksi element <p> yang memilik urutan ganjil, dimana urutan dihitung dari element <p> yang terakhir.
   DIV 1

   P 1

   DIV 2

   P 2

   DIV 3

   P 3

   DIV 4

   P 4

   DIV 5

   .sample1 div:nth-last-of-type(odd) {
   	background-color: #6FA9FF;
   }

2. Numeric. Argumen numeric akan menseleksi element yang berada pada urutan sesuai dengan nilai yang diberikan, misal: div:nth-last-of-type(4) yang akan menseleksi element <div> yang memiliki urutan ke-4 dari belakang.
   DIV 1

   P 1

   DIV 2

   P 2

   DIV 3

   P 3

   DIV 4

   P 4

   DIV 5

   .sample2 div:nth-last-of-type(4) {
   	background-color: #6FA9FF;
   }

3. Formula. Formula ditulis dengan menggunakan pola an+b, dimana: (1) a merupakan angka, (2) n tetap ditulis sebagai huruf n, yang dapat diartikan urutan element  ke-n, n akan dimulai dari 0, urutan berikutnya bisa positif – 0,1,2,3, dst, maupun negatif -0,-1,-2,-3, dst. (3) Operator bisa positif +, maupun negatif -, dan (4) merupakan angka, yang digunakan jika dalam formula kita menggunakan operator, misal:p:nth-last-of-type(n+2)  akan menseleksi element dengan urutan ke 2(0+2), 3(1+2), 4(2+2), dst, dihitung mulai  dari element <p> terakhir.
   DIV 1

   P 1

   DIV 2

   P 2

   DIV 3

   P 3

   DIV 4

   P 4

   DIV 5

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

   div:nth-last-of-type(-n+2)  akan menseleksi element dengan urutan ke 2(-0+2) dan 1(-1+3), dihitung mulai  dari element <div> terakhir.

   DIV 1

   P 1

   DIV 2

   P 2

   DIV 3

   P 3

   DIV 4

   P 4

   DIV 5

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

   p:nth-last-of-type(n+2):nth-last-of-type(-n+3)  akan menseleksi element yang memenuhi kriteria (n+2) yaitu 2,3,4,dst.. dan (-n+3) yaitu 3,2,1 dengan demikian element yang terseleksi adalah element 2 dan 3, dihitung mulai  dari element <p> terakhir.

   DIV 1

   P 1

   DIV 2

   P 2

   DIV 3

   P 3

   DIV 4

   P 4

   DIV 5

   .sample5 p:nth-last-of-type(n+2):nth-last-of-type(-n+3) {
   	background-color: #6FA9FF;
   }

   p:nth-last-of-type(3n+1)  akan menseleksi element ke 1(3×0 + 1), 4(3×1 +1), 7(3×2 + 1), dst…, dihitung mulai  dari element <p> terakhir.

   DIV 1

   P 1

   DIV 2

   P 2

   DIV 3

   P 3

   DIV 4

   P 4

   DIV 5

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

Dukungan browser

Sumber:  Mozilla Developer Network

Kesimpulan

Pseudo class selector :nth-last-of-type  yang  diperkenalkan mulai CSS 3, memiliki cara kerja yang  sama dengan pseudo class :nth-last-of-type  hanya bedanya urutannya saja yang terbalik, meskipun jarang digunakan, pada kasus tertentu kita tetap membutuhkan selector ini, so..  tidak ada salahnya kita mempelajarinya.

Demikian tutorial mengenai pseudo class selector  :nth-last-of-type semoga bermanfaat

Salam JWD