Jenis Pemilih
Jenis Pemilih
Jenis Pemilih adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 1 dari 1. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 1 pelajaran total.
Pendahuluan
Halo,
Dalam pelajaran ini, kita akan memperdalam pengetahuan CSS dengan pemilih yang lebih kompleks.
Definisi Gaya Jamak
Kita dapat membuat beberapa definisi gaya dengan menempatkan titik koma di antara setiap gaya.
.first{
color:blue;
font-size:20px;
text-align: center;
}terdapat dokumen HTML yang semakin kompleks
Sejauh ini, kita telah menggunakan tag, ID, dan pemilih kelas sederhana. Namun, dalam beberapa kasus, ketika antarmuka pengguna menjadi kompleks, kita perlu menggunakan pemilih yang lebih kompleks.
Pada contoh di bawah ini, terdapat dokumen HTML yang semakin kompleks.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>menganalisis contoh
Sekarang mari kita analisis kode kita.
- Terdapat div dengan ID my-area yang berfungsi sebagai wadah di dalam badan halaman. Div ini merupakan leluhur dari semua elemen di bawahnya.
- Elemen p dengan kelas first merupakan saudara dari elemen div dengan kelas second.
- Elemen ketiga merupakan anak dari elemen kedua, dan elemen my-area dapat dianggap sebagai leluhur elemen ketiga.
Peringatan
Anda dapat menganggap tata letak HTML seperti silsilah keluarga secara harfiah.
Anda dapat mewarisi sifat genetik dari kakek Anda.
Namun, jika pewarisan ini berubah pada ayah Anda, gen ayah akan lebih dominan dan sifat dari kakek Anda akan berubah.
Kombinasi Pemilih
Sekarang mari kita lihat cara membuat kombinasi pada pemilih.
Pernyataan berikut menyatakan bahwa elemen dengan kelas second merupakan turunan (anak atau cucu) dari elemen dengan kelas third.
Jika terdapat spasi di antara kedua kelas, artinya kelas di sebelah kiri mencari elemen turunannya.
.second .third{
color:red;
}Pemilih Anak
Pada contoh di bawah ini,
Artinya, pilih kelas third yang merupakan anak dari kelas second.
Tanda lebih besar berarti memilih anak dari elemen terkait.
.second > .third{
color:red;
}kita dapat menggabungkan pemilih tag dan kelas untuk memilih elemen.
Pada saat yang sama, kita dapat menggabungkan pemilih tag dan kelas untuk memilih elemen.
Contoh di bawah ini akan memilih elemen p dengan kelas third.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Misalkan kita ingin memilih div dengan kelas first.
Misalkan kita ingin memilih div dengan kelas first.
Pada contoh di bawah ini, artinya memilih elemen dengan kelas first yang merupakan anak dari elemen div dengan ID my-area.
Hal ini meningkatkan spesifisitas elemen yang akan dipilih.
div#my-area > .first{
color:red;
}Memilih Semua
Tanda bintang (*) merupakan hal penting di antara pemilih.
Tanda ini berarti memilih semuanya.
Pada contoh di bawah ini, pemilih tersebut menyatakan bahwa elemen dengan ID my-area harus memilih semua turunannya.
Hal yang perlu diperhatikan adalah yang dipilih bukan hanya anak, melainkan semua turunan.
Jika kita hanya ingin memilih anak, kita harus menempatkan tanda lebih besar sebelum tanda bintang.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Pemilih Saudara Berdekatan
Kita telah menggunakan pemilih turunan dan pemilih anak; sekarang mari kita pelajari pemilih saudara.
Pemilih saudara menggunakan tanda + untuk memilih saudara berikutnya.
Pada contoh kita, warna latar belakang elemen paragraf ke-3 akan diubah menjadi kuning oleh pemilih tersebut.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Pemilih Semua Saudara
Jika kita ingin memilih bukan hanya saudara pertama berikutnya, tetapi semua saudara setelahnya, kita menggunakan tanda tilde (~).
Simbol tilde juga dikenal sebagai kombinator saudara berikutnya.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Pseudo-kelas dan Kelas CSS
Ekspresi yang bukan kelas tetapi berperilaku seperti kelas disebut pseudo-kelas.
Kita tidak mendefinisikan pseudo-kelas pada elemen apa pun dalam HTML.
Ketika peramban menafsirkan kode, peramban menganggap pseudo-kelas tersebut ada. Oleh karena itu, kita dapat menggunakan pseudo-kelas dalam pemilih CSS.
Pseudo-kelas :hover
Di antara pseudo-kelas, :hover tidak diragukan lagi merupakan yang paling dikenal.
Hover (:hover) adalah pseudo-kelas yang secara otomatis didefinisikan pada elemen terkait oleh peramban ketika tetikus diarahkan ke elemen tersebut.
Pseudo-kelas digunakan setelah simbol titik dua (:) dalam pernyataan pemilih.
Sintaks penggunaan pseudo-kelas dicontohkan di bawah ini.
selector:pseudo-class {
property: value;
}Memberi Gaya pada Tautan dengan :hover
Sekarang mari kita buat tautan dan lihat tampilannya ketika kursor diarahkan ke atasnya.
Peringatan: Karena perangkat seluler tidak memiliki peristiwa hover seperti di web, efek ini tidak akan terlihat dalam aplikasi seluler CoddyKit.
Pada contoh di bawah ini, mari kita amati bahwa ketika kursor diarahkan ke tautan, warna tautan akan berubah menjadi hijau.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>Pseudo-kelas :first-child
Salah satu pseudo-kelas yang paling membingungkan adalah :first-child.
Biasanya, ketika melihat namanya, kita dapat menyimpulkan bahwa pseudo-kelas ini berarti memilih anak pertama dari sebuah elemen.
Sebenarnya, kesimpulan ini tidak benar.
Pseudo-kelas ini digunakan untuk memilih elemen pertama di antara saudara-saudara elemen tersebut.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudo-kelas :last-child
last-child merupakan kebalikan dari pseudo-kelas first-child. Pseudo-kelas ini digunakan untuk memilih elemen terakhir di antara saudara-saudara elemen tersebut.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudo-elemen ::before
Jika kita ingin menambahkan sesuatu sebelum sebuah elemen, pseudo-pemilih ::before digunakan.
Pada contoh di bawah ini, kita menambahkan konten 'Hello' sebelum elemen header.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>Pseudo-elemen ::after
Pseudo-elemen ::after, yang merupakan kebalikan dari pseudo-elemen ::before, digunakan untuk menambahkan konten baru setelah elemen.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Daftar Pseudo-Class
Kita telah mempelajari pseudo-class yang paling sering digunakan. Namun, masih ada puluhan lainnya.
Anda dapat melihat daftar semua pseudo-class melalui tautan di bawah ini. Anda dapat menggunakan salah satunya kapan pun diperlukan.
Selamat
Selamat 🎉
Pada bagian ini, kita telah mempelajari Jenis-Jenis Selector.
Pada bagian berikutnya, kita akan mempelajari properti CSS yang paling sering digunakan
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Jenis Pemilih” gratis?
Ya — teks lengkap “Jenis Pemilih” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 1 pelajaran total.
Apa yang akan aku pelajari di “Jenis Pemilih”?
Jenis Pemilih Kamu berlatih HTML for Kids dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML for Kids?
Tidak diperlukan pengalaman sebelumnya. HTML for Kids di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 1.
Berapa lama pelajaran “Jenis Pemilih” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.