Kita buka kembali source code dari pelajaran sebelumnya. Disini kita bisa melihat setelah Judul Kecil Pertama, paragraf pertama memiliki warna latar belakang biru. Pada video sebelumnya kita telah mempelajari cara memberi warna paragraf dengan menggunakan adjacent selector. Pada video ini kita bisa melakukan hal yang sama, dengan menggunakan pseudo class.

Pertama kita lihat dahulu ya kode HTML-nya. Kita lihat ke bagian Judul Kecil Pertama. Disini kita bisa lihat bahwa judul kecil menggunakan tag H2. Dan selanjutnya diikuti dengan 2 buah paragraf. Apabila menggunakan adjacent selector, maka kita bisa memilih paragraf pertama setelah tag h2 dengan cara menuliskan selector h2+p. Sekarang kita akan melakukan hal yang sama, dengan cara menggunakan pseudo class first-of-type.

Untuk menggunakan pseudo class first-of-type, ada satu syarat yang harus dipenuhi terlebih dahulu. Seluruh tag harus kita grup terlebih dahulu ke dalam satu container. Kebetulan di video sebelumnya, kita sudah melakukan grouping terhadap konten ini dengan menggunakan tag section. Jadi bisa dilihat disini bahwa ada satu buah tag section, dengan isi pertama adalah tag h2, dan kemudian diikuti dengan dua buah tag p.

Kita buka kembali kode css. Kita cari kode sebelumnya h2+p. Kalau kode ini kita hapus, maka warna biru pada paragraf pertama akan hilang.

Selanjutnya, kita bisa munculkan kembali warna biru tersebut dengan menggunakan selector p:first-of-type. Kita bisa lihat hasilnya di browser. Berhubung pseudo class ini berlaku untuk seluruh tag p, maka paragraf pertama pada judul Belajar CSS Lanjutan juga turut berubah menjadi berwarna biru.

Nah, sekarang kita akan belajar mengenai apa bedanya first-of-type dengan first-child? Apabila kata first-of-type saya ganti menjadi first-child, maka warna biru pada paragraf pertama akan hilang. Mengapa begitu?

Kita lihat lagi ke kode HTML. Kita lihat lagi ke section Judul Kecil Pertama. Dan kita lihat bahwa tag pertama di dalam section adalah tag h2. Apabila kita menggunakan pseudo class first child, maka browser akan mencari ke tag pertama yang berada di dalam section. Berhubung tag pertama menggunakan elemen h2, sedangkan yang kita cari adalah elemen p, maka browser tidak berhasil memilih tag tersebut. Akhirnya tidak ada yang berubah menjadi warna biru.

Agar first child berhasil memilih paragraf, maka paragraf harus berada langsung setelah tag section. Sebagai contoh, saya pindahkan tag h2 setelah paragraf pertama. Maka paragraf tersebut akan berubah menjadi berwarna biru. Karena browser menghitung tag p sebagai anak pertama, tag h2, sebagai anak kedua dan kemudian tag p lagi sebagai anak ketiga.

Jadi inilah perbedaan antara first-child dengan first-of-type ya. Apabila kita menggunakan first-child, maka elemen yang kita pilih harus benar-benar anak pertama dari grup. Sedangkan apabila kita menggunakan first-of-type, maka elemen bebas boleh berada di posisi berapa pun.

Kita kembalikan tag h2 ke posisi semula. Selanjutnya kita akan belajar mengenai last-child. Last-child ini sebenarnya sama dengan first-child, hanya saja penomorannya dihitung dari bawah. Jadi kalau kita lihat kembali ke section Judul Kecil Pertama, maka penomoran nomor satunya dimulai dari tag paragraf paling bawah, dan nomor duanya adalah tag paragraf tengah, dan nomor tiga adalah tag h2. Jadi apabila selector css kita ganti menjadi p:last-child, maka yang dipilih untuk mendapatkan warna biru adalah paragraf yang paling bawah dalam tag section.

Nah, sama seperti first-child, untuk pseudo class last-child ini, maka tag yang paling akhir dari grup harus merupakan tag p. Jadi kalau misalkan setelah paragraf, saya tambahkan tag lain, misalkan saya tambahkan br saja deh. Maka paragraf kedua pada judul Kecil Pertama sudah tidak berwarna biru lagi. Mengapa? Karena sekarang last-child dalam tag section sudah berubah menjadi tag br.

Untuk memilih paragraf terakhir dalam tag section, tidak peduli di posisi mana pun paragraf itu berada, maka kita bisa menggunakan pseudo-class last-of-type. Kita ganti kode css menjadi p:last-of-type. Nah, sekarang paragraf kedua pada judul kecil pertama tetap terpilih, walaupun tag terakhir dalam section adalah tag br.

Selanjutnya kita akan belajar untuk menggunakan pseudo class nth-child. Dengan menggunakan nth-child, maka kita bisa memilih paragraf dengan posisi nomor sekian sesuai dengan kebutuhan kita. Sebagai contoh, kita ganti last-of-type menjadi nth-child. Setelah itu kita bisa memasukkan nomor urut yang hendak kita pilih dengan menggunakan tanda kurung. Misalkan kita tambahkan tanda kurung 1, untuk memilih paragraf yang merupakan anak pertama.

Kita simpan dan refresh browser. Tidak ada paragraf yang berubah warna menjadi biru ya. Permasalahannya sama dengan first-child, yaitu karena tag pertama di dalam grup adalah tag judul.

Kita ganti parameter nth-child dari 1 menjadi 2. Kita simpan dan refresh browser. Nah, sekarang paragraf pertama dari masing-masing section sudah terpilih untuk mendapatkan warna latar belakang biru. Kita juga bisa mencoba menganti parameternya dari 2 menjadi 3 atau 4 untuk memilih paragraf berikutnya.

Jadi disini kita bisa melihat bahwa dengan menggunakan nth-child, maka browser akan menghitung nomor urut anak dari semua jenis tag yang berada di dalam tag induknya.

Lain halnya kalau kita menggunakan nth-of-type. Maka nomor urut yang digunakan oleh browser hanya dihitung apabila browser menemukan elemen yang sedang dipilih. Misalkan kita ganti selector kita menjadi p:nth-of-type(1). Maka browser akan memilih paragraf pertama di masing-masing grup, tidak peduli paragraf tersebut didahului oleh tag lain. Kita bisa mencoba mengganti parameter tersebut menjadi 2 atau 3 untuk melihat efek dari selectornya.

Sama seperti pseudo class last-child, kita juga bisa menggunakan pseudo class nth-last-child untuk penomoran yang dimulai dari bawah. Misalkan kita ganti selector menjadi nth-last-child(1). Maka browser akan memilih paragraf yang merupakan anak terakhir dari grup. Paragraf terakhir pada Judul Kecil Pertama tidak terpilih karena ada tag br yang kita tambahkan barusan.

Kita bisa mencoba untuk mengganti nilai parameternya menjadi 2 atau 3 untuk melihat efeknya. Nantinya teman-teman bisa mencoba sendiri nth-last-of-type. Konsepnya masih tetap sama ya seperti yang kita telah pelajari pada video ini.

Sekarang kita akan mencoba pseudo class nth-child untuk tag li. Pertama kita copy dahulu kode css selector kita dan kita paste dibawahnya. Kita ubah selector menjadi li:nth-child(1). Kita simpan dan lihat hasilnya di browser. Kita lihat ke daftar menu restoran. Sekarang semua tag li pertama akan mendapatkan warna latar belakang biru. Namun hasilnya kurang bagus ya. Kita ubah selectornya menjadi li tingkat ketiga. Dan sekarang kita lihat hasilnya setiap menu pertama akan mendapatkan warna latar belakang biru.

Kita ubah nilai parameter nth-child dari 1 menjadi 3. Sekarang setiap menu ketiga akan mendapatkan warna latar belakang biru. Nah, kita bisa mengubah lagi ya parameter dari nth-child ini, agar setiap kelipatan 3 akan mendapatkan warna latar belakang biru. Caranya? Kita tinggal menambahkan huruf n setelah angka 3. Nah sekarang setiap kelipatan 3 dari nama menu akan berwarna biru.

Pseudo class nth-child ini akan sering kita gunakan apabila kita membuat website yang bertujuan untuk menampilkan data. Kita bisa menyajikan data dengan menggunakan warna latar belakang yang sedikit berbeda di setiap row-nya, agar data lebih gampang untuk dibaca. Untuk melakukan hal ini, kita bisa menggunakan psudo class nth-child, dengan menggunakan parameter 2n. Sebagai alternatif, kita bisa menggunakan kata even untuk memilih row genap. Atau kita bisa menggunakan kata odd untuk memilih row ganjil.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.