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

. Di dalam kode css, kita menuliskan selectornya dengan element div sebagai parent terlebih dahulu, diikuti dengan spasi, dan setelah itu baru diikuti dengan element a. Sebagai contoh disini kita memberikan warna latar belakang pink pada tag tersebut.

Kemudian kita lihat ke kode HTML-nya. Disini saya menyertakan dua buah kalimat. Kalimat pertama ditulis di dalam tag

, dan memiliki tag di akhir kalimat. Sedangkan kalimat kedua 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

saja.

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

akan menjelaskan bahwa konten ini adalah bagian header, tag
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
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.