Pada Tutorial Belajar CSS kali ini kita akan membahas salah satu advanced CSS selector yang disebut dengan Child Selector, serta perbedaannya dengan descendant selector
Arti CSS Pemilih Anak
Pemilih Anak adalah pemilih dalam CSS yang penggunaannya didasarkan pada struktur urutan tag HTML
Karena tag HTML dapat berisi tag lain, struktur HTML dapat disamakan dengan 'silsilah keluarga'. Dimana suatu tag bisa disebut 'induk' dari tag lain, dan bisa juga disebut 'anak' dari tag lain. Istilah 'anak' adalah kata 'anak' dalam CSS Pemilih Anak
Sebagai contoh struktur hubungan orangtua-anak dalam HTML (hubungan orangtua-anak), berikut adalah kode HTML sederhana
<!DOCTYPE html> <html> <head> <title>Belajar Child Selector CSS</title> </head> <body> <h1>Belajar Child Selector CSS</h1> <h2>Tutorial Belajar CSS</h2> <div class="wrapper"> <h2>Pengantar CSS</h2> <p><em>HTML</em> dan <strong>CSS</strong> 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, <span>seperti warna dan font yang digunakan.</span></p> <h3>Pengertian CSS</h3> <p>Dalam bahasa bakunya, seperti di kutip dari <cite>wikipedia</cite>, CSS adalah <em>“kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup”</em>, dimana bahasa markup ini salah satunya adalah HTML.</p> </div> <h3>Menu Tutorial di Duniailkom.com:</h3> <ul> <li>Tutorial Belajar HTML</li> <li>Tutorial Belajar CSS</li> <li>Tutorial Belajar PHP</li> <li>Tutorial Belajar JavaScript</li> <li>Tutorial Belajar MySQL</li> <li>Tutorial Belajar jQuery</li> <li>Tutorial Belajar Sass</li> <li>Tutorial Belajar Bootstrap</li> <li>Tutorial Belajar Laravel</li> </ul> </body> </html>Kode HTML di atas terdiri dari beberapa tag header, tag div, tag paragraf, dan struktur daftar. Silakan pelajari kode HTML sejenak, dan bandingkan dengan struktur 'pohon' berikut
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 ke pemilih anak, pemilih ini memungkinkan kita untuk memilih tag HTML berdasarkan aturan anak-orang tua. Perhatikan pemilih CSS berikut
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 Pemilih Anak dan Pemilih Keturunan
Jika Anda pernah membuat kode CSS sebelumnya, maka pemilih anak ini akan terasa mirip dengan pemilih CSS umum yang dikenal sebagai pemilih keturunan
Perhatikan 2 CSS Selector 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 daftar HTML yang akan kita tambahkan kode CSS di atas
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar PHP</li>
<li>Tutorial Belajar JavaScript</li>
</ul>_Sehingga hasil yang didapatkan adalah sebagai berikut
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
- yang bukan secara langsung berada di bawah tag
.Tetapi bagaimana jika kita ingin hanya 1 daftar level yang diubah?
ul.nav > li { color: green; }Maksud dari selector tersebut adalah: cari seluruh tag
- yang merupakan ‘child’ dari tag
. Karena selector tersebut hanya mencari tag - yang merupakan ‘anak’ langsung dari tag
, maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, inilah hasil yang kami dapatkan
Tutorial Pemilih Anak CSS
Sebagai tutorial, kita akan menerapkan child selector yang telah kita pelajari pada pembahasan di atas. Berikut adalah kode HTML+CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar Child Selector CSS</title>
<style type="text/css">
div > h2 {
font-style:italic;
font-family: Calibri;
}
div > p {
color:green;
}
ul.nav > li {
color: brown;
}
</style>
</head>
<body>
<h1>Belajar Child Selector CSS</h1>
<div class="wrapper">
<h2>Pengantar CSS</h2>
<p><em>HTML</em> dan <strong>CSS</strong> 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,
<span>seperti warna dan font yang digunakan.</span></p>
<h3>Pengertian CSS</h3>
<p>Dalam bahasa bakunya, seperti di kutip dari <cite>wikipedia</cite>,
CSS adalah <em>“kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”</em>, dimana bahasa markup ini salah satunya
adalah HTML.</p>
</div>
<h3>Menu Tutorial di Duniailkom.com:</h3>
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar JavaScript</li>
<li>Tutorial Belajar MySQL</li>
<li>Tutorial Belajar jQuery</li>
<li>Tutorial Belajar Sass</li>
<li>Tutorial Belajar Bootstrap</li>
<li>Tutorial Belajar Laravel</li>
</ul>
</body>
</html>_Struktur "parent-child" tidak hanya berguna untuk memahami CSS child selector, pada tutorial selanjutnya kita akan membahas beberapa pseudo class selector yang berhubungan dengan hubungan "parent-child", seperti. anak pertama,. nth-child(N), dan. anak terakhir dalam Tutorial Pembelajaran CSS. Cara Menggunakan Pemilih Kelas Pseudo Anak
LIHAT SEMUA
yang berada dibawah tag . Tag h2 inilah yang ‘ditangkap’ dengan selector div > h2.Perbedaan antara Pemilih Anak dan Pemilih Keturunan
Jika Anda pernah membuat kode CSS sebelumnya, maka pemilih anak ini akan terasa mirip dengan pemilih CSS umum yang dikenal sebagai pemilih keturunan
Perhatikan 2 CSS Selector 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 daftar HTML yang akan kita tambahkan kode CSS di atas
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar PHP</li>
<li>Tutorial Belajar JavaScript</li>
</ul>_Sehingga hasil yang didapatkan adalah sebagai berikut
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
- yang bukan secara langsung berada di bawah tag
.Tetapi bagaimana jika kita ingin hanya 1 daftar level yang diubah?
ul.nav > li { color: green; }Maksud dari selector tersebut adalah: cari seluruh tag
- yang merupakan ‘child’ dari tag
. Karena selector tersebut hanya mencari tag - yang merupakan ‘anak’ langsung dari tag
, maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, inilah hasil yang kami dapatkan
Tutorial Pemilih Anak CSS
Sebagai tutorial, kita akan menerapkan child selector yang telah kita pelajari pada pembahasan di atas. Berikut adalah kode HTML+CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar Child Selector CSS</title>
<style type="text/css">
div > h2 {
font-style:italic;
font-family: Calibri;
}
div > p {
color:green;
}
ul.nav > li {
color: brown;
}
</style>
</head>
<body>
<h1>Belajar Child Selector CSS</h1>
<div class="wrapper">
<h2>Pengantar CSS</h2>
<p><em>HTML</em> dan <strong>CSS</strong> 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,
<span>seperti warna dan font yang digunakan.</span></p>
<h3>Pengertian CSS</h3>
<p>Dalam bahasa bakunya, seperti di kutip dari <cite>wikipedia</cite>,
CSS adalah <em>“kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”</em>, dimana bahasa markup ini salah satunya
adalah HTML.</p>
</div>
<h3>Menu Tutorial di Duniailkom.com:</h3>
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar JavaScript</li>
<li>Tutorial Belajar MySQL</li>
<li>Tutorial Belajar jQuery</li>
<li>Tutorial Belajar Sass</li>
<li>Tutorial Belajar Bootstrap</li>
<li>Tutorial Belajar Laravel</li>
</ul>
</body>
</html>_Struktur "parent-child" tidak hanya berguna untuk memahami CSS child selector, pada tutorial selanjutnya kita akan membahas beberapa pseudo class selector yang berhubungan dengan hubungan "parent-child", seperti. anak pertama,. nth-child(N), dan. anak terakhir dalam Tutorial Pembelajaran CSS. Cara Menggunakan Pemilih Kelas Pseudo Anak
LIHAT SEMUA
Perbedaan antara Pemilih Anak dan Pemilih Keturunan
Jika Anda pernah membuat kode CSS sebelumnya, maka pemilih anak ini akan terasa mirip dengan pemilih CSS umum yang dikenal sebagai pemilih keturunan
Perhatikan 2 CSS Selector 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 daftar HTML yang akan kita tambahkan kode CSS di atas
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar PHP</li>
<li>Tutorial Belajar JavaScript</li>
</ul>_Sehingga hasil yang didapatkan adalah sebagai berikut
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
- yang bukan secara langsung berada di bawah tag
.Tetapi bagaimana jika kita ingin hanya 1 daftar level yang diubah?
ul.nav > li { color: green; }Maksud dari selector tersebut adalah: cari seluruh tag
- yang merupakan ‘child’ dari tag
. Karena selector tersebut hanya mencari tag - yang merupakan ‘anak’ langsung dari tag
, maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, inilah hasil yang kami dapatkan
Tutorial Pemilih Anak CSS
Sebagai tutorial, kita akan menerapkan child selector yang telah kita pelajari pada pembahasan di atas. Berikut adalah kode HTML+CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar Child Selector CSS</title>
<style type="text/css">
div > h2 {
font-style:italic;
font-family: Calibri;
}
div > p {
color:green;
}
ul.nav > li {
color: brown;
}
</style>
</head>
<body>
<h1>Belajar Child Selector CSS</h1>
<div class="wrapper">
<h2>Pengantar CSS</h2>
<p><em>HTML</em> dan <strong>CSS</strong> 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,
<span>seperti warna dan font yang digunakan.</span></p>
<h3>Pengertian CSS</h3>
<p>Dalam bahasa bakunya, seperti di kutip dari <cite>wikipedia</cite>,
CSS adalah <em>“kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”</em>, dimana bahasa markup ini salah satunya
adalah HTML.</p>
</div>
<h3>Menu Tutorial di Duniailkom.com:</h3>
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar JavaScript</li>
<li>Tutorial Belajar MySQL</li>
<li>Tutorial Belajar jQuery</li>
<li>Tutorial Belajar Sass</li>
<li>Tutorial Belajar Bootstrap</li>
<li>Tutorial Belajar Laravel</li>
</ul>
</body>
</html>_Struktur "parent-child" tidak hanya berguna untuk memahami CSS child selector, pada tutorial selanjutnya kita akan membahas beberapa pseudo class selector yang berhubungan dengan hubungan "parent-child", seperti. anak pertama,. nth-child(N), dan. anak terakhir dalam Tutorial Pembelajaran CSS. Cara Menggunakan Pemilih Kelas Pseudo Anak
LIHAT SEMUA
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 daftar HTML yang akan kita tambahkan kode CSS di atas
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar PHP</li>
<li>Tutorial Belajar JavaScript</li>
</ul>_Sehingga hasil yang didapatkan adalah sebagai berikut
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
- yang bukan secara langsung berada di bawah tag
.Tetapi bagaimana jika kita ingin hanya 1 daftar level yang diubah?
ul.nav > li { color: green; }Maksud dari selector tersebut adalah: cari seluruh tag
- yang merupakan ‘child’ dari tag
. Karena selector tersebut hanya mencari tag - yang merupakan ‘anak’ langsung dari tag
, maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, inilah hasil yang kami dapatkan
Tutorial Pemilih Anak CSS
Sebagai tutorial, kita akan menerapkan child selector yang telah kita pelajari pada pembahasan di atas. Berikut adalah kode HTML+CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar Child Selector CSS</title>
<style type="text/css">
div > h2 {
font-style:italic;
font-family: Calibri;
}
div > p {
color:green;
}
ul.nav > li {
color: brown;
}
</style>
</head>
<body>
<h1>Belajar Child Selector CSS</h1>
<div class="wrapper">
<h2>Pengantar CSS</h2>
<p><em>HTML</em> dan <strong>CSS</strong> 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,
<span>seperti warna dan font yang digunakan.</span></p>
<h3>Pengertian CSS</h3>
<p>Dalam bahasa bakunya, seperti di kutip dari <cite>wikipedia</cite>,
CSS adalah <em>“kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”</em>, dimana bahasa markup ini salah satunya
adalah HTML.</p>
</div>
<h3>Menu Tutorial di Duniailkom.com:</h3>
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar JavaScript</li>
<li>Tutorial Belajar MySQL</li>
<li>Tutorial Belajar jQuery</li>
<li>Tutorial Belajar Sass</li>
<li>Tutorial Belajar Bootstrap</li>
<li>Tutorial Belajar Laravel</li>
</ul>
</body>
</html>_Struktur "parent-child" tidak hanya berguna untuk memahami CSS child selector, pada tutorial selanjutnya kita akan membahas beberapa pseudo class selector yang berhubungan dengan hubungan "parent-child", seperti. anak pertama,. nth-child(N), dan. anak terakhir dalam Tutorial Pembelajaran CSS. Cara Menggunakan Pemilih Kelas Pseudo Anak
LIHAT SEMUA
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 daftar HTML yang akan kita tambahkan kode CSS di atas
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar PHP</li>
<li>Tutorial Belajar JavaScript</li>
</ul>_Sehingga hasil yang didapatkan adalah sebagai berikut
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
- yang bukan secara langsung berada di bawah tag
.Tetapi bagaimana jika kita ingin hanya 1 daftar level yang diubah?
ul.nav > li { color: green; }Maksud dari selector tersebut adalah: cari seluruh tag
- yang merupakan ‘child’ dari tag
. Karena selector tersebut hanya mencari tag - yang merupakan ‘anak’ langsung dari tag
, maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, inilah hasil yang kami dapatkan
Tutorial Pemilih Anak CSS
Sebagai tutorial, kita akan menerapkan child selector yang telah kita pelajari pada pembahasan di atas. Berikut adalah kode HTML+CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar Child Selector CSS</title>
<style type="text/css">
div > h2 {
font-style:italic;
font-family: Calibri;
}
div > p {
color:green;
}
ul.nav > li {
color: brown;
}
</style>
</head>
<body>
<h1>Belajar Child Selector CSS</h1>
<div class="wrapper">
<h2>Pengantar CSS</h2>
<p><em>HTML</em> dan <strong>CSS</strong> 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,
<span>seperti warna dan font yang digunakan.</span></p>
<h3>Pengertian CSS</h3>
<p>Dalam bahasa bakunya, seperti di kutip dari <cite>wikipedia</cite>,
CSS adalah <em>“kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”</em>, dimana bahasa markup ini salah satunya
adalah HTML.</p>
</div>
<h3>Menu Tutorial di Duniailkom.com:</h3>
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar JavaScript</li>
<li>Tutorial Belajar MySQL</li>
<li>Tutorial Belajar jQuery</li>
<li>Tutorial Belajar Sass</li>
<li>Tutorial Belajar Bootstrap</li>
<li>Tutorial Belajar Laravel</li>
</ul>
</body>
</html>_Struktur "parent-child" tidak hanya berguna untuk memahami CSS child selector, pada tutorial selanjutnya kita akan membahas beberapa pseudo class selector yang berhubungan dengan hubungan "parent-child", seperti. anak pertama,. nth-child(N), dan. anak terakhir dalam Tutorial Pembelajaran CSS. Cara Menggunakan Pemilih Kelas Pseudo Anak
LIHAT SEMUA
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 daftar HTML yang akan kita tambahkan kode CSS di atas
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar PHP</li>
<li>Tutorial Belajar JavaScript</li>
</ul>_Sehingga hasil yang didapatkan adalah sebagai berikut
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag
- yang bukan secara langsung berada di bawah tag
.Tetapi bagaimana jika kita ingin hanya 1 daftar level yang diubah?
ul.nav > li { color: green; }Maksud dari selector tersebut adalah: cari seluruh tag
- yang merupakan ‘child’ dari tag
. Karena selector tersebut hanya mencari tag - yang merupakan ‘anak’ langsung dari tag
, maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, inilah hasil yang kami dapatkan
Tutorial Pemilih Anak CSS
Sebagai tutorial, kita akan menerapkan child selector yang telah kita pelajari pada pembahasan di atas. Berikut adalah kode HTML+CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar Child Selector CSS</title>
<style type="text/css">
div > h2 {
font-style:italic;
font-family: Calibri;
}
div > p {
color:green;
}
ul.nav > li {
color: brown;
}
</style>
</head>
<body>
<h1>Belajar Child Selector CSS</h1>
<div class="wrapper">
<h2>Pengantar CSS</h2>
<p><em>HTML</em> dan <strong>CSS</strong> 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,
<span>seperti warna dan font yang digunakan.</span></p>
<h3>Pengertian CSS</h3>
<p>Dalam bahasa bakunya, seperti di kutip dari <cite>wikipedia</cite>,
CSS adalah <em>“kumpulan kode yang digunakan untuk mendefenisikan
desain dari bahasa markup”</em>, dimana bahasa markup ini salah satunya
adalah HTML.</p>
</div>
<h3>Menu Tutorial di Duniailkom.com:</h3>
<ul class="nav">
<li>Tutorial Belajar HTML</li>
<li>Tutorial Belajar CSS</li>
<ul>
<li>Pengertian CSS</li>
<li>Selector CSS</li>
<li>Property CSS</li>
</ul>
<li>Tutorial Belajar JavaScript</li>
<li>Tutorial Belajar MySQL</li>
<li>Tutorial Belajar jQuery</li>
<li>Tutorial Belajar Sass</li>
<li>Tutorial Belajar Bootstrap</li>
<li>Tutorial Belajar Laravel</li>
</ul>
</body>
</html>_Struktur "parent-child" tidak hanya berguna untuk memahami CSS child selector, pada tutorial selanjutnya kita akan membahas beberapa pseudo class selector yang berhubungan dengan hubungan "parent-child", seperti. anak pertama,. nth-child(N), dan. anak terakhir dalam Tutorial Pembelajaran CSS. Cara Menggunakan Pemilih Kelas Pseudo Anak
LIHAT SEMUA
Agar lebih mudah dipahami, perhatikan kode CSS berikut ini
Kode CSS tersebut akan membuat seluruh tag
- memiliki warna text hijau, termasuk jika list tersebut memiliki list juga (list bersarang) atau nested list.
- yang bukan secara langsung berada di bawah tag
- .
- yang merupakan ‘child’ dari tag
- . Karena selector tersebut hanya mencari tag
- yang merupakan ‘anak’ langsung dari tag
- , maka nested list tidak akan berefek.
Dengan menggunakan kode HTML yang sama, inilah hasil yang kami dapatkan
Tutorial Pemilih Anak CSS
Sebagai tutorial, kita akan menerapkan child selector yang telah kita pelajari pada pembahasan di atas. Berikut adalah kode HTML+CSS
<!DOCTYPE html> <html> <head> <title>Belajar Child Selector CSS</title> <style type="text/css"> div > h2 { font-style:italic; font-family: Calibri; } div > p { color:green; } ul.nav > li { color: brown; } </style> </head> <body> <h1>Belajar Child Selector CSS</h1> <div class="wrapper"> <h2>Pengantar CSS</h2> <p><em>HTML</em> dan <strong>CSS</strong> 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, <span>seperti warna dan font yang digunakan.</span></p> <h3>Pengertian CSS</h3> <p>Dalam bahasa bakunya, seperti di kutip dari <cite>wikipedia</cite>, CSS adalah <em>“kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup”</em>, dimana bahasa markup ini salah satunya adalah HTML.</p> </div> <h3>Menu Tutorial di Duniailkom.com:</h3> <ul class="nav"> <li>Tutorial Belajar HTML</li> <li>Tutorial Belajar CSS</li> <ul> <li>Pengertian CSS</li> <li>Selector CSS</li> <li>Property CSS</li> </ul> <li>Tutorial Belajar JavaScript</li> <li>Tutorial Belajar MySQL</li> <li>Tutorial Belajar jQuery</li> <li>Tutorial Belajar Sass</li> <li>Tutorial Belajar Bootstrap</li> <li>Tutorial Belajar Laravel</li> </ul> </body> </html>_Pada contoh di atas, saya membuat 3 anak penyeleksi menggunakan contoh penyeleksi yang telah kita pelajari di tutorial iniStruktur "parent-child" tidak hanya berguna untuk memahami CSS child selector, pada tutorial selanjutnya kita akan membahas beberapa pseudo class selector yang berhubungan dengan hubungan "parent-child", seperti. anak pertama,. nth-child(N), dan. anak terakhir dalam Tutorial Pembelajaran CSS. Cara Menggunakan Pemilih Kelas Pseudo Anak
- yang merupakan ‘anak’ langsung dari tag
Tetapi bagaimana jika kita ingin hanya 1 daftar level yang diubah?
ul.nav > li { color: green; }Maksud dari selector tersebut adalah: cari seluruh tag
- yang merupakan ‘child’ dari tag
Sebagai contoh, berikut adalah daftar HTML yang akan kita tambahkan kode CSS di atas
<ul class="nav"> <li>Tutorial Belajar HTML</li> <li>Tutorial Belajar CSS</li> <ul> <li>Pengertian CSS</li> <li>Selector CSS</li> <li>Property CSS</li> </ul> <li>Tutorial Belajar PHP</li> <li>Tutorial Belajar JavaScript</li> </ul>_Sehingga hasil yang didapatkan adalah sebagai berikut
Perhatikan bahwa semua text akan berwarna hijau, termasuk tag