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

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

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-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

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