Pemilih Kelas
Pemilih Kelas
Pemilih Kelas 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.
Alasan Menggunakan Pemilih Class
Halo,
Kita telah sampai pada pemilih class, salah satu topik paling penting dalam CSS.
Kita sudah mengenal pemilih class karena sampai saat ini kita sering menggunakannya.
Dalam pelajaran ini, mari kita memperkuat pengetahuan kita sekaligus mempelajari kelebihannya dibandingkan pemilih lainnya.
Sintaks Pemilih Kelas
Mari kita mulai.
Kita menggunakan pemilih titik (.) untuk mendefinisikan pemilih jenis kelas. Di bawah ini terdapat pemilih kelas bernama my-class dan gaya ukuran font sebesar 10px telah diterapkan.
.my-class {
font-size: 10px;
}
Kita juga dapat mendefinisikan lebih dari satu gaya untuk pemilih kelas.
.my-class {
font-size: 10px;
}
Selector Ganda
Kita dapat menetapkan lebih dari satu class pada elemen yang sama.
Pada contoh di bawah, dua selector class bernama el1 dan el2 didefinisikan.
Dua class atau lebih dapat ditambahkan ke atribut class pada elemen yang dibuat dengan tag p, dengan memisahkannya menggunakan spasi.
Anda dapat melihat bahwa style dari kedua class diterapkan pada elemen secara bersamaan di bagian pratinjau.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Jadi, mengapa kita harus memilih pemilih kelas daripada pemilih tag dan ID?
Jadi, mengapa kita harus memilih pemilih kelas daripada pemilih tag dan ID?
Saat menggunakan pemilih tag, hasil yang tidak diinginkan dapat terjadi karena pemilih ini memengaruhi semua elemen yang dibuat dengan tag tersebut. Oleh karena itu, biasanya kita menggunakan tag ini jika ada fitur umum yang harus dimiliki semua elemen.
Misalnya, jika kita ingin jenis font setiap elemen menjadi 'Lato' , kita membuat definisi sebagai berikut.
a{
font-family: Lato,sans-serif
}Jadi, mengapa kita harus memilih pemilih kelas daripada pemilih tag dan ID? 2
Kita dapat membuat definisi khusus elemen dengan pemilih ID.
Namun, karena semua definisi gaya kita hanya berlaku untuk satu elemen, kita harus menulis ulang kode untuk elemen lain yang ingin ditampilkan dengan properti yang sama.
Hal ini karena hanya boleh ada satu elemen dalam dokumen HTML yang memiliki ID yang sama.
Spesifisitas CSS
Sekarang mari kita pelajari konsep Spesifisitas CSS.
Mari kita buat kembali sebuah masalah agar topik ini lebih mudah dipahami, lalu kita akan mempelajari konsep ini sambil menyelesaikannya.
Spesifisitas CSS 2
Pada contoh di bawah ini,
Definisi gaya telah dibuat untuk tag p.
Definisi gaya dibuat dengan pemilih kelas bernama .first.
Kedua pemilih memilih elemen yang sama dalam dokumen HTML kita.
Kedua pemilih mendefinisikan gaya untuk menggantikan properti warna yang sama. Dalam kasus ini, akan terjadi konflik.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
Spesifisitas CSS 3
Jika melihat contoh tersebut, kita mungkin berpikir bahwa warnanya akan menjadi merah berdasarkan pengetahuan sebelumnya.
Hal ini karena konsep kaskade memberi tahu kita bahwa bagian terakhir dalam urutan kode akan menang.
Namun, ada sedikit perbedaan. Jika keduanya memiliki spesifisitas yang sama, kode yang muncul terakhir akan menang.
Ini merupakan evaluasi yang menunjukkan pentingnya spesifisitas pemilih pada elemen atau berbagai elemen terkait.
Terlepas dari posisinya dalam kode, pemilih dengan tingkat spesifisitas tinggi akan dievaluasi oleh peramban.
Peringatan
Pemilih kelas merupakan definisi yang lebih spesifik daripada pemilih elemen. Oleh karena itu, tingkat spesifisitasnya lebih tinggi.
Spesifisitas Pemilih
Mengetahui pemilih mana yang lebih spesifik sebenarnya sangat mudah.
Karena hanya ada 1 ID yang ditetapkan pada sebuah elemen dan hanya ada 1 ID tersebut di halaman web, kita mengharapkannya menjadi pemilih dengan prioritas tertinggi.
Pemilih kelas, di sisi lain, dapat dievaluasi lebih spesifik daripada pemilih tag karena memilih kelompok yang lebih spesifik daripada tag.
Kita akan melihat bahwa pemilih ID menang pada contoh di bawah ini dengan memilih elemen yang sama menggunakan 3 pemilih berbeda.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Alat Penghitung Spesifisitas
Anda dapat mengakses penghitung Spesifisitas daring melalui tautan ini.
Saat Spesifisitas Berpengaruh
Jadi, apakah saya harus selalu menggunakan perhitungan ini?
Tentu tidak. Konflik tidak akan terjadi jika kita menulis kode sesuai standar.
Jadi, Anda tidak perlu melakukan perhitungan matematika setiap saat, tetapi ketika terjadi masalah, Anda mungkin memerlukan informasi ini untuk menyelesaikannya.
Selamat
Selamat. 🥳🥳🥳
Anda telah menyelesaikan pelajaran Selector Class dan Kekhususan CSS.
Pada bagian berikutnya, kita akan mempelajari Jenis-Jenis Selector.
Anda dapat mengeklik untuk melanjutkan ke bagian berikutnya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemilih Kelas” gratis?
Ya — teks lengkap “Pemilih Kelas” 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 “Pemilih Kelas”?
Pemilih Kelas 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 “Pemilih Kelas” 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.