Belajar CSS 3 Lanjutan
Descendant Selector
Materi ini memiliki 2 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.
Pada video ini kita akan mempelajari mengenai cara menggunakan Descendant Selector. Sebagai contoh disini, kita akan memilih tag yang berada di dalam tag Kemudian kita lihat ke kode HTML-nya. Disini saya menyertakan dua buah kalimat. Kalimat pertama ditulis di dalam tag , dan juga memiliki tag di akhir kalimat. Kita bisa lihat hasil akhirnya di bagian kanan. Hanya link yang berada pada kalimat pertama saja yang mendapatkan background pink, hal ini terjadi karena kita secara spesifik hanya memilik link atau tag yang berada di dalam tag Oke, sekarang kita mulai ya. Saya sudah membuka kode dari pelajaran sebelumnya. Apabila kita melihat lagi kontennya, disini bisa kita bagi menjadi beberapa bagian ya. Bagian pertama adalah judul utama, ditambah dengan dua paragraf. Kemudian diikuti dengan judul kecil pertama, yang isinya dua paragraf. Lalu ada judul kecil kedua, yang isinya tiga paragraf. Dan bagian terakhir adalah daftar menu restoran yang isinya adalah list bertingkat. Saya ada melakukan beberapa perubahan dari kode pelajaran sebelumnya. Yang pertama panjang konten di dalam setiap paragraf sudah saya kurangi, dari yang sebelumnya 4 baris per paragraf menjadi 2 baris saja. Dan yang kedua, kalau diperhatikan daftar pada menu restoran sudah saya lengkapi. Saya juga sudah mengubah ukuran font yang digunakan kembali ke ukuran normal. Nah, pertama kita akan mencoba untuk memberikan warna pada paragraf, namun hanya untuk bagian judul utama saja ya. Jadi yang kita mau hanya dua paragraf ini saja ya. Kita buka kode css, dan kita tambahkan selector p. Lalu kita beri property color dengan nilai brown. Kita simpan dan refresh browser. Dan kita lihat hasilnya, seluruh konten yang berupa paragraf berubah warna menjadi coklat. Sedangkan konten yang berupa list masih tetap berwarna hitam. Artinya kita masih salah ya, karena yang kita mau hanya paragraf yang berada di bagian Judul Utama saja. Untuk memperbaiki hal ini, maka kita bisa membuka kode HTML-nya. Kita tambahkan sebuah tag div sebelum judul utama. Dan kemudian kita pindahkan seluruh judul utama dan kedua paragrafnya ke dalam tag div. Selanjutnya kita kembali ke kode css. Kita ubah selector kita, menjadi tag p yang berada di dalam tag div. Selector yang kita gunakan menjadi div ditambah spasi dan kemudian diikuti dengan p. Kembali lagi ini artinya adalah tag p yang berada di dalam tag div. Tag div sendiri tidak ikut berubah. Jadi berbeda ya kalau misalnya kita lihat diatasnya ada selector h1, h2, artinya seluruh tag h1 dan h2 akan ikut berubah. Kita simpan dan refresh browser. Nah sekarang hanya paragraf yang merupakan bagian dari judul utama saja yang berubah warnanya menjadi coklat. Selanjutnya ada kita bisa tingkatkan lagi agar kode kita menjadi lebih baik. Penggunaan tag div untuk melakukan grouping bagian judul utama sifatnya terlalu generic ya, terutama apabila nantinya kita sudah menggunakan bootstrap, karena kita akan menggunakan tag div hampir di semua tempat, baik itu untuk container, table, row, cell, dan lain-lain. Oleh karena ini, akan lebih baik apabila kita mengganti tag div dengan tag lain. Disini kita bisa menggunakan Semantic Elements. Semantic Elements ini memiliki fungsi yang sama persis dengan div, yaitu untuk melakukan grouping terhadap konten, namun nama dari element ini dapat menjelaskan arti dari konten tersebut. Sebagai contoh, tag Dengan menggunakan semantic, maka software yang membaca kode HTML kita, seperti browser, crawler, screen reader, ataupun software lainnya, akan lebih mengerti mengenai bagian-bagian dari konten kita, sehingga software tersebut dapat menyesuaikan fungsinya. Sebagai contoh seperti software crawler yang tugas utamanya adalah untuk mencari link-link untuk menjelajahi situs kita, dengan menggunakan semantic, maka crawler akan dengan lebih mudah mencari link karena biasanya ditaruh pada bagian Kembali ke kode HTML kita, tag div yang barusan kita buat, akan lebih tepat apabila diganti menjadi tag section. Dan kita buka kembali kode CSS, dan kita ganti juga kata div menjadi section. Kita simpan dan refresh browser. Warna kedua paragraf pada judul utama masih tetap coklat ya, sesuai dengan yang kita mau. Ukuran font pada judul utama menjadi sedikit lebih kecil karena tag section, nantinya kalau kita mau bisa kita atur lagi menggunakan selector h1. Namun yang perlu diperhatikan disini adalah penggunaan selector section pada css kita disini juga masih terlalu generic. Mengapa? Karena bisa saja dalam konten kita terdapat beberapa section. Sebagai contoh ya, kita lengkapi halaman kita menjadi 4 buah section atau 4 bagian. Kita buka kode HTML dan kita menuju ke sebelum Judul Kecil Pertama. Kita tambahkan tag section. Lalu kita pindahkan Judul Kecil Pertama beserta kedua paragrafnya ke dalam tag section. Kita lakukan hal yang sama untuk Judul Kecil Kedua dan Daftar Menu Makan. Kita simpan dan refresh browser. Dan kita akan kembali mendapatkan masalah yang sama pada awal video. Hal ini terjadi karena semua tag paragraf pada konten kita sudah berada di dalam tag section. Kita perlu cara yang lebih spesifik lagi untuk merunjuk ke konten Judul Utama. Sebagai solusinya, kita bisa menambahkan attribute class pada section pertama. Kita cari section pertama. Lalu kita tambahkan attribute class=”judul_utama”. Mungkin ada yang bertanya mengapa menggunakan attribute class? Mengapa tidak menggunakan attribute ID? Jawabannya adalah karena attribute ini hendak kita gunakan di kode CSS. Saat ini CSS menyarankan agar kita sudah tidak menggunakan selector ID lagi. Bahkan ada text editor tertentu yang akan mengeluarkan warning apabila kita mengetikkan selector ID. Jadi semuanya menggunakan selector class ya, walaupun dalam seluruh konten kita class ini hanya digunakan satu kali saja. Selanjutnya kita buka kode CSS kita. Kita ganti kata section menjadi .judul_utama. Kita simpan dan refresh browser. Sekarang paragraf yang berwarna coklat hanya paragraf yang berada di bawah judul utama saja. Selanjutnya kita lihat ke Daftar Menu Restoran. Disini ada list bertingkat, dimana tingkat pertama adalah kategori menunya, yaitu Makanan dan Minuman. Sedangkan tingkat kedua adalah sub-kategori menu, seperti Paket, Masakan Nusantara, dan seterusnya. Dan tingkatan ketiga ada nama menunya. Nah, sekarang kita hendak mengubah list di tingkat kedua, yaitu sub kategori, agar warnanya sedikit berbeda dan bisa dengan mudah kita bedakan dari tingkatan lainnya. Kita lihat di kode HTML-nya. Disini kita menemukan tag li yang isinya Makanan. Dan kemudian ada tag li lagi yang isinya Paket. Artinya list tingkat kedua ini adalah li di dalam li. Kita buka kembali kode CSS kita. Kita tambahkan selector li spasi li. Dan kita tambahkan properti color: brown;. Ini hanya contoh agar cepat saja ya. Kita simpan dan refresh browser. Warna subkategori telah berubah menjadi coklat, namun warna menu juga turut berubah. Mengapa? Karena selector kita adalah li di dalam li, sedangkan daftar tingkat ketiga juga memenuhi syarat ya. Kita lihat di kode HTML-nya, bahwa Nasi Ayam Bakar adalah tag li, yang berada di dalam tag li. Oleh karena itu, kita mesti membuat selector untuk daftar tingkat ketiga, dan mengembalikan warnanya menjadi hitam. Kita lihat disini, bahwa menu makanan adalah tag li, yang berada di dalam tag li, yang berada di dalam tag li lagi. Berarti ada 3 tingkat li. Kita buka kode CSS kita, dan kita buat selector li spasi li spasi li. Kita tambahkan properti color: black; Kita simpan dan lihat hasilnya pada browser. Sekarang yang berwarna coklat hanya sub-kategori saja ya. Nantinya teman-teman dapat mencoba untuk mengubah properti lain seperti mengubah ukuran tulisan, ketebalan teks, jenis font, dan lain-lain agar subkategori dapat terlihat dengan lebih jelas. 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.