Dalam Tutorial Belajar CSS kali ini kita akan membahas salah satu selector lanjutan CSS yang disebut dengan Child Selector, serta perbedaannya dengan descendant selector.
Pengertian Child Selector CSS
Child Selector adalah selector di dalam CSS yang penggunaannya di dasarkan pada struktur urutan tag HTML.
Karena tag-tag HTML dapat berisi tag lain, maka struktur HTML dapat diibaratkan dengan ‘pohon keluarga’. Dimana sebuah tag dapat disebut sebagai ‘induk’ dari tag lain, dan dapat juga disebut sebagai ‘anak’ dari tag lainnya. Istilah ‘anak’ inilah yang menjadi kata ‘child’ dalam Child Selector CSS.
Sebagai contoh stuktur hubungan induk – anak dalam HTML (parent-child relationship), berikut adalah kode HTML sederhana:
Belajar Child Selector CSS
Belajar Child Selector CSS
Tutorial Belajar CSS
Pengantar CSS
HTML dan CSS adalah bagian tak terpisahkan
dari website modern saat ini. HTML digunakan untuk membuat konten atau
kerangka logis dari halaman web,
sedangkan CSS digunakan untuk mengatur tampilan dari website,
seperti warna dan font yang digunakan.
Pengertian CSS
Dalam bahasa bakunya, seperti di kutip dari wikipedia,
CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”, dimana bahasa markup ini salah satunya
adalah HTML.
Menu Tutorial di Duniailkom.com:
- Tutorial Belajar HTML
- Tutorial Belajar CSS
- Tutorial Belajar PHP
- Tutorial Belajar JavaScript
- Tutorial Belajar MySQL
- Tutorial Belajar jQuery
- Tutorial Belajar Sass
- Tutorial Belajar Bootstrap
- Tutorial Belajar Laravel
Kode HTML diatas terdiri dari beberapa tag header, tag div, tag paragraf dan struktur list. Silahkan anda pelajari sesaat kode HTML tersebut, dan bandingkan dengan struktur ‘pohon’ berikut ini:
Dapat terlihat bahwa seluruh tag HTML memiliki hubungan ‘kekeluargaan’ satu dengan yang lain. Tag merupakan ‘child’ dari tag
, dan tag
juga merupakan ‘child’ dari tag
Kembali mengenai child selector, selector ini mengizinkan kita untuk menyeleksi tag HTML berdasarkan aturan child-parent ini. Perhatikan selector CSS berikut ini:
div > h2 {
font-style:italic;
font-family: Calibri;
}Tanda “>” dalam selector diatas menandakan child selector. Selector div > h2 berarti cari seluruh tag
yang merupakan ‘child’ atau ‘anak’ dari tag . Dalam contoh struktur pohon kita, terdapat 1 buah tag > yang berada dibawah tag . Tag h2 inilah yang ‘ditangkap’ dengan selector div > h2.
Perbedaan antara Child Selector dengan Descendant Selector
Jika anda pernah membuat kode CSS sebelumnya, maka child selector ini akan terasa mirip dengan selector umum CSS yang dikenal dengan descendant selector.
Perhatikan 2 buah selector CSS berikut ini:
div.main h2 {color:green;}
div.main > h2 {color:green;}
Baris pertama merupakan descendant selector, sedangkan baris kedua adalah child selector. Keduanya akan membuat tag
yang berada dibawah tag menjadi warna hijau. Jadi, apa perbedaan keduanya?
Descendant selector (gabungan selector yang dipisah dengan tanda spasi) akan mencari seluruh tag
yang berada di dalam tag , walaupun tag tersebut berada di dalam tag lain (nested tag). Selama tag
berada di bawah tag , maka div.main h2 akan menemukan tag tersebut.
Berbeda dengan descendant selector, child selector hanya akan mencari seluruh tag
yang merupakan turunan langsung dari tag .
Agar lebih mudah dipahami, perhatikan kode CSS berikut ini:
ul.nav li { color: green; }
Kode CSS tersebut akan membuat seluruh tag
yang berada di dalam tag memiliki warna text hijau, termasuk jika list tersebut memiliki list juga (list bersarang) atau nested list.
Sebagai contoh, berikut adalah list HTML yang akan kita tambahkan kode CSS diatas:
Maka hasil yang didapat adalah sebagai berikut:
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
yang bukan secara langsung berada di bawah tag .
Namun bagaimana jika kita menginginkan hanya 1 level list saja yang akan diubah? atau dengan kata lain, hanya ‘child’ saja, tidak termasuk ‘grand child’, atau nested list? Maka berikut adalah selector CSSnya:
ul.nav > li { color: green; }
Maksud dari selector tersebut adalah: cari seluruh tag
yang merupakan ‘child’ dari tag class=nav>. Karena selector tersebut hanya mencari tag yang merupakan ‘anak’ langsung dari tag , maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, berikut adalah hasil yang kita dapat:
Tutorial Child Selector CSS
Sebagai tutorial, kita akan menerapkan child selector yang kita pelajari dalam pembahasan diatas. Berikut adalah kode HTML+CSSnya:
Belajar Child Selector CSS
Belajar Child Selector CSS
Pengantar CSS
HTML dan CSS adalah bagian tak terpisahkan
dari website modern saat ini. HTML digunakan untuk membuat konten atau
kerangka logis dari halaman web,
sedangkan CSS digunakan untuk mengatur tampilan dari website,
seperti warna dan font yang digunakan.
Pengertian CSS
Dalam bahasa bakunya, seperti di kutip dari wikipedia,
CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”, dimana bahasa markup ini salah satunya
adalah HTML.
Menu Tutorial di Duniailkom.com:
Dalam contoh diatas, saya membuat 3 child selector dengan menggunakan contoh-contoh selector yang telah kita pelajari dalam tutorial kali ini.
Struktur “parent-child” tidak hanya berguna dalam memahami child selector CSS, dalam tutorial berikutnya, kita akan membahas beberapa pseudo class selector yang berkaitan dengan hubungan “parent-child”, seperti :first-child, :nth-child(N), dan :last-child dalam Tutorial Belajar CSS: Cara Penggunaan Child Pseudo Class Selector.
Sumber wk.com
Artikel Terkait
- Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam mene
- Membuat garis tepi (border) merupakan salah satu efek tampilan yang paling sering ditamba
- Jika dalam tutorial CSS sebelumnya kita telah mempelajari Pengertian CSS, pada tutorial k
- Dalam tutorial Belajar CSS kali ini kita akan membahas Cara Mengubah Ukuran Font HTML den
- Dalam tutorial belajar CSS kali ini kita akan membahas tentang selector CSS yang lebih kh
- Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial meng
Perbedaan antara Child Selector dengan Descendant Selector
Jika anda pernah membuat kode CSS sebelumnya, maka child selector ini akan terasa mirip dengan selector umum CSS yang dikenal dengan descendant selector.
Perhatikan 2 buah selector CSS berikut ini:
div.main h2 {color:green;}
div.main > h2 {color:green;}Baris pertama merupakan descendant selector, sedangkan baris kedua adalah child selector. Keduanya akan membuat tag
yang berada dibawah tag menjadi warna hijau. Jadi, apa perbedaan keduanya?
Descendant selector (gabungan selector yang dipisah dengan tanda spasi) akan mencari seluruh tag
yang berada di dalam tag , walaupun tag tersebut berada di dalam tag lain (nested tag). Selama tag
berada di bawah tag , maka div.main h2 akan menemukan tag tersebut.
Berbeda dengan descendant selector, child selector hanya akan mencari seluruh tag
yang merupakan turunan langsung dari tag .
Agar lebih mudah dipahami, perhatikan kode CSS berikut ini:
ul.nav li { color: green; }
Kode CSS tersebut akan membuat seluruh tag
yang berada di dalam tag memiliki warna text hijau, termasuk jika list tersebut memiliki list juga (list bersarang) atau nested list.
Sebagai contoh, berikut adalah list HTML yang akan kita tambahkan kode CSS diatas:
Maka hasil yang didapat adalah sebagai berikut:
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
yang bukan secara langsung berada di bawah tag .
Namun bagaimana jika kita menginginkan hanya 1 level list saja yang akan diubah? atau dengan kata lain, hanya ‘child’ saja, tidak termasuk ‘grand child’, atau nested list? Maka berikut adalah selector CSSnya:
ul.nav > li { color: green; }
Maksud dari selector tersebut adalah: cari seluruh tag
yang merupakan ‘child’ dari tag class=nav>. Karena selector tersebut hanya mencari tag yang merupakan ‘anak’ langsung dari tag , maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, berikut adalah hasil yang kita dapat:
Tutorial Child Selector CSS
Sebagai tutorial, kita akan menerapkan child selector yang kita pelajari dalam pembahasan diatas. Berikut adalah kode HTML+CSSnya:
Belajar Child Selector CSS
Belajar Child Selector CSS
Pengantar CSS
HTML dan CSS adalah bagian tak terpisahkan
dari website modern saat ini. HTML digunakan untuk membuat konten atau
kerangka logis dari halaman web,
sedangkan CSS digunakan untuk mengatur tampilan dari website,
seperti warna dan font yang digunakan.
Pengertian CSS
Dalam bahasa bakunya, seperti di kutip dari wikipedia,
CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”, dimana bahasa markup ini salah satunya
adalah HTML.
Menu Tutorial di Duniailkom.com:
Dalam contoh diatas, saya membuat 3 child selector dengan menggunakan contoh-contoh selector yang telah kita pelajari dalam tutorial kali ini.
Struktur “parent-child” tidak hanya berguna dalam memahami child selector CSS, dalam tutorial berikutnya, kita akan membahas beberapa pseudo class selector yang berkaitan dengan hubungan “parent-child”, seperti :first-child, :nth-child(N), dan :last-child dalam Tutorial Belajar CSS: Cara Penggunaan Child Pseudo Class Selector.
Sumber wk.com
Artikel Terkait
- Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam mene
- Membuat garis tepi (border) merupakan salah satu efek tampilan yang paling sering ditamba
- Jika dalam tutorial CSS sebelumnya kita telah mempelajari Pengertian CSS, pada tutorial k
- Dalam tutorial Belajar CSS kali ini kita akan membahas Cara Mengubah Ukuran Font HTML den
- Dalam tutorial belajar CSS kali ini kita akan membahas tentang selector CSS yang lebih kh
- Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial meng
Descendant selector (gabungan selector yang dipisah dengan tanda spasi) akan mencari seluruh tag
yang berada di dalam tag , walaupun tag tersebut berada di dalam tag lain (nested tag). Selama tag
berada di bawah tag , maka div.main h2 akan menemukan tag tersebut.
Berbeda dengan descendant selector, child selector hanya akan mencari seluruh tag
yang merupakan turunan langsung dari tag .
Agar lebih mudah dipahami, perhatikan kode CSS berikut ini:
ul.nav li { color: green; }
Kode CSS tersebut akan membuat seluruh tag
yang berada di dalam tag memiliki warna text hijau, termasuk jika list tersebut memiliki list juga (list bersarang) atau nested list.
Sebagai contoh, berikut adalah list HTML yang akan kita tambahkan kode CSS diatas:
Maka hasil yang didapat adalah sebagai berikut:
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
yang bukan secara langsung berada di bawah tag .
Namun bagaimana jika kita menginginkan hanya 1 level list saja yang akan diubah? atau dengan kata lain, hanya ‘child’ saja, tidak termasuk ‘grand child’, atau nested list? Maka berikut adalah selector CSSnya:
ul.nav > li { color: green; }
Maksud dari selector tersebut adalah: cari seluruh tag
yang merupakan ‘child’ dari tag class=nav>. Karena selector tersebut hanya mencari tag yang merupakan ‘anak’ langsung dari tag , maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, berikut adalah hasil yang kita dapat:
Tutorial Child Selector CSS
Sebagai tutorial, kita akan menerapkan child selector yang kita pelajari dalam pembahasan diatas. Berikut adalah kode HTML+CSSnya:
Belajar Child Selector CSS
Belajar Child Selector CSS
Pengantar CSS
HTML dan CSS adalah bagian tak terpisahkan
dari website modern saat ini. HTML digunakan untuk membuat konten atau
kerangka logis dari halaman web,
sedangkan CSS digunakan untuk mengatur tampilan dari website,
seperti warna dan font yang digunakan.
Pengertian CSS
Dalam bahasa bakunya, seperti di kutip dari wikipedia,
CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”, dimana bahasa markup ini salah satunya
adalah HTML.
Menu Tutorial di Duniailkom.com:
Dalam contoh diatas, saya membuat 3 child selector dengan menggunakan contoh-contoh selector yang telah kita pelajari dalam tutorial kali ini.
Struktur “parent-child” tidak hanya berguna dalam memahami child selector CSS, dalam tutorial berikutnya, kita akan membahas beberapa pseudo class selector yang berkaitan dengan hubungan “parent-child”, seperti :first-child, :nth-child(N), dan :last-child dalam Tutorial Belajar CSS: Cara Penggunaan Child Pseudo Class Selector.
Sumber wk.com
Artikel Terkait
- Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam mene
- Membuat garis tepi (border) merupakan salah satu efek tampilan yang paling sering ditamba
- Jika dalam tutorial CSS sebelumnya kita telah mempelajari Pengertian CSS, pada tutorial k
- Dalam tutorial Belajar CSS kali ini kita akan membahas Cara Mengubah Ukuran Font HTML den
- Dalam tutorial belajar CSS kali ini kita akan membahas tentang selector CSS yang lebih kh
- Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial meng
tersebut berada di dalam tag lain (nested tag). Selama tag
berada di bawah tag , maka div.main h2 akan menemukan tag tersebut.
Berbeda dengan descendant selector, child selector hanya akan mencari seluruh tag
yang merupakan turunan langsung dari tag .
Agar lebih mudah dipahami, perhatikan kode CSS berikut ini:
ul.nav li { color: green; }
Kode CSS tersebut akan membuat seluruh tag
yang berada di dalam tag memiliki warna text hijau, termasuk jika list tersebut memiliki list juga (list bersarang) atau nested list.
Sebagai contoh, berikut adalah list HTML yang akan kita tambahkan kode CSS diatas:
Maka hasil yang didapat adalah sebagai berikut:
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
yang bukan secara langsung berada di bawah tag .
Namun bagaimana jika kita menginginkan hanya 1 level list saja yang akan diubah? atau dengan kata lain, hanya ‘child’ saja, tidak termasuk ‘grand child’, atau nested list? Maka berikut adalah selector CSSnya:
ul.nav > li { color: green; }
Maksud dari selector tersebut adalah: cari seluruh tag
yang merupakan ‘child’ dari tag class=nav>. Karena selector tersebut hanya mencari tag yang merupakan ‘anak’ langsung dari tag , maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, berikut adalah hasil yang kita dapat:
Tutorial Child Selector CSS
Sebagai tutorial, kita akan menerapkan child selector yang kita pelajari dalam pembahasan diatas. Berikut adalah kode HTML+CSSnya:
Belajar Child Selector CSS
Belajar Child Selector CSS
Pengantar CSS
HTML dan CSS adalah bagian tak terpisahkan
dari website modern saat ini. HTML digunakan untuk membuat konten atau
kerangka logis dari halaman web,
sedangkan CSS digunakan untuk mengatur tampilan dari website,
seperti warna dan font yang digunakan.
Pengertian CSS
Dalam bahasa bakunya, seperti di kutip dari wikipedia,
CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”, dimana bahasa markup ini salah satunya
adalah HTML.
Menu Tutorial di Duniailkom.com:
Dalam contoh diatas, saya membuat 3 child selector dengan menggunakan contoh-contoh selector yang telah kita pelajari dalam tutorial kali ini.
Struktur “parent-child” tidak hanya berguna dalam memahami child selector CSS, dalam tutorial berikutnya, kita akan membahas beberapa pseudo class selector yang berkaitan dengan hubungan “parent-child”, seperti :first-child, :nth-child(N), dan :last-child dalam Tutorial Belajar CSS: Cara Penggunaan Child Pseudo Class Selector.
Sumber wk.com
Artikel Terkait
- Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam mene
- Membuat garis tepi (border) merupakan salah satu efek tampilan yang paling sering ditamba
- Jika dalam tutorial CSS sebelumnya kita telah mempelajari Pengertian CSS, pada tutorial k
- Dalam tutorial Belajar CSS kali ini kita akan membahas Cara Mengubah Ukuran Font HTML den
- Dalam tutorial belajar CSS kali ini kita akan membahas tentang selector CSS yang lebih kh
- Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial meng
Berbeda dengan descendant selector, child selector hanya akan mencari seluruh tag
yang merupakan turunan langsung dari tag .
Agar lebih mudah dipahami, perhatikan kode CSS berikut ini:
ul.nav li { color: green; }
Kode CSS tersebut akan membuat seluruh tag
yang berada di dalam tag memiliki warna text hijau, termasuk jika list tersebut memiliki list juga (list bersarang) atau nested list.
Sebagai contoh, berikut adalah list HTML yang akan kita tambahkan kode CSS diatas:
Maka hasil yang didapat adalah sebagai berikut:
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
yang bukan secara langsung berada di bawah tag .
Namun bagaimana jika kita menginginkan hanya 1 level list saja yang akan diubah? atau dengan kata lain, hanya ‘child’ saja, tidak termasuk ‘grand child’, atau nested list? Maka berikut adalah selector CSSnya:
ul.nav > li { color: green; }
Maksud dari selector tersebut adalah: cari seluruh tag
yang merupakan ‘child’ dari tag class=nav>. Karena selector tersebut hanya mencari tag yang merupakan ‘anak’ langsung dari tag , maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, berikut adalah hasil yang kita dapat:
Tutorial Child Selector CSS
Sebagai tutorial, kita akan menerapkan child selector yang kita pelajari dalam pembahasan diatas. Berikut adalah kode HTML+CSSnya:
Belajar Child Selector CSS
Belajar Child Selector CSS
Pengantar CSS
HTML dan CSS adalah bagian tak terpisahkan
dari website modern saat ini. HTML digunakan untuk membuat konten atau
kerangka logis dari halaman web,
sedangkan CSS digunakan untuk mengatur tampilan dari website,
seperti warna dan font yang digunakan.
Pengertian CSS
Dalam bahasa bakunya, seperti di kutip dari wikipedia,
CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”, dimana bahasa markup ini salah satunya
adalah HTML.
Menu Tutorial di Duniailkom.com:
Dalam contoh diatas, saya membuat 3 child selector dengan menggunakan contoh-contoh selector yang telah kita pelajari dalam tutorial kali ini.
Struktur “parent-child” tidak hanya berguna dalam memahami child selector CSS, dalam tutorial berikutnya, kita akan membahas beberapa pseudo class selector yang berkaitan dengan hubungan “parent-child”, seperti :first-child, :nth-child(N), dan :last-child dalam Tutorial Belajar CSS: Cara Penggunaan Child Pseudo Class Selector.
Sumber wk.com
Agar lebih mudah dipahami, perhatikan kode CSS berikut ini:
ul.nav li { color: green; }Kode CSS tersebut akan membuat seluruh tag
- memiliki warna text hijau, termasuk jika list tersebut memiliki list juga (list bersarang) atau nested list.
Sebagai contoh, berikut adalah list HTML yang akan kita tambahkan kode CSS diatas:
Maka hasil yang didapat adalah sebagai berikut:
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
- .
Namun bagaimana jika kita menginginkan hanya 1 level list saja yang akan diubah? atau dengan kata lain, hanya ‘child’ saja, tidak termasuk ‘grand child’, atau nested list? Maka berikut adalah selector CSSnya:
ul.nav > li { color: green; }Maksud dari selector tersebut adalah: cari seluruh tag
- , maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, berikut adalah hasil yang kita dapat:
Tutorial Child Selector CSS
Sebagai tutorial, kita akan menerapkan child selector yang kita pelajari dalam pembahasan diatas. Berikut adalah kode HTML+CSSnya:
Belajar Child Selector CSS
Belajar Child Selector CSS
Pengantar CSS
HTML dan CSS adalah bagian tak terpisahkan
dari website modern saat ini. HTML digunakan untuk membuat konten atau
kerangka logis dari halaman web,
sedangkan CSS digunakan untuk mengatur tampilan dari website,
seperti warna dan font yang digunakan.
Pengertian CSS
Dalam bahasa bakunya, seperti di kutip dari wikipedia,
CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”, dimana bahasa markup ini salah satunya
adalah HTML.
Menu Tutorial di Duniailkom.com:
Dalam contoh diatas, saya membuat 3 child selector dengan menggunakan contoh-contoh selector yang telah kita pelajari dalam tutorial kali ini.
Struktur “parent-child” tidak hanya berguna dalam memahami child selector CSS, dalam tutorial berikutnya, kita akan membahas beberapa pseudo class selector yang berkaitan dengan hubungan “parent-child”, seperti :first-child, :nth-child(N), dan :last-child dalam Tutorial Belajar CSS: Cara Penggunaan Child Pseudo Class Selector.
Sumber wk.com
Artikel Terkait
- Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam mene
- Membuat garis tepi (border) merupakan salah satu efek tampilan yang paling sering ditamba
- Jika dalam tutorial CSS sebelumnya kita telah mempelajari Pengertian CSS, pada tutorial k
- Dalam tutorial Belajar CSS kali ini kita akan membahas Cara Mengubah Ukuran Font HTML den
- Dalam tutorial belajar CSS kali ini kita akan membahas tentang selector CSS yang lebih kh
- Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial meng
EmoticonEmoticon