Hallo sahabat dumenity bertemu lagi dalam tutorial Dumetschool pada tutorial kali ini saya akan membahas sebuah Fungsi Property CSS Last-of-type dan First-of-type, properti tersebut hampir sama dengan fungsi dari :nth-child. Fungsi Property CSS Last-of-type dan First-of-type adalah untuk penyeleksian sebuah elemen tag HTML. Pemilihan: nth-last-of-type selector memungkinkan teman – teman memilih satu atau lebih elemen berdasarkan urutan sumbernya, sesuai dengan formula. Hal ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai “pseudo-class struktural”, yang berarti digunakan untuk menata konten berdasarkan hubungannya dengan elemen induk.

Begitu juga dengan nth-first-of-type memungkinkan teman – teman memilih satu atau lebih elemen berdasarkan urutan sumbernya, sesuai dengan formula. Dari kedua property CSS di atas ada sedikit perbedaan, jika Property CSS Last-of-type di gunakan untuk menyeleksi bagian elemen terakhir berdasarkan dari urutan sumbernya, sedangkan Property CSS First-of-type digunakan untuk penyeleksian pada bagian elemen pertama, namun penyeleksian di sini hanya berlaku pada elemen HTML yang sejenis.

Oke untuk lebih jelasnya saya akan memberikan contonnya langsung, misalkan saya mempunyai sebuah elemen HTML berupa tag H2 sebanyak 5, dari kelima tag h2 tersebut saya akan menyeleksi tag h2 pertama dan tag h2 bagian terakhir dengan memberikan style border: 3px solid red pada tag h2 pertama  dan style border: 3px solid blue  pada bagian tag h2 terakhir. Maka yang saya perlukan pada tag h2 terakhir adalah property CSS seperti di bawah ini:fungsi Property CSS Last-of-type dan First-of-type

 

sedangkan untuk yang tag h2 pertama maka saya menggunakan :

Fungsi Property CSS Last-of-type dan First-of-type

Oke untuk lebih jelasnya lagi silahkan lihat contoh script di bawah ini:

Oke teman – teman dari script di atas saya akan memberikan sebuah style pada bagian h2 urutan ke satu dan h2 pada bagian urutan kelima. Karena Fungsi Property CSS Last-of-type dan First-of-type di gunakan pada tag HTML yang sejenis atau saling berhubungan. Oke untuk lebih jelasnya silahkan teman – teman copy paste script di atas dan jalankan pada browsernya, nanti hasilnya kurang lebih akan seperti di bawah ini:
Fungsi Property CSS Last-of-type dan First-of-type

Oke itulah tadi penjelasan Fungsi Property CSS Last-of-type dan First-of-type dari saya semoga bermanfaat.