Di bagian sebelumnya dari seri Cascading Style Sheets (CSS) 101, kita membahas cara menangani banyak aturan untuk sebuah elemen. Artikel ini membahas fitur CSS penting lainnya: penyeleksi, yang dapat digunakan untuk memilih elemen dalam halaman untuk menyesuaikan gaya halaman Web.
Jenis pemilih
Gaya CSS memiliki banyak cara untuk mengimplementasikan pemilihan elemen. Berbagai metode seleksi meliputi seleksi melalui pemilih universal, pemilih tipe, pemilih kelas, pemilih ID, pemilih leluhur, pemilih keturunan, pemilih saudara yang berdekatan, dan pemilih atribut.
Di sini kita akan melihat masing-masing metode ini satu per satu (kecuali saudara kandung dan atribut yang berdekatan, yang akan kita bahas minggu depan). Catatan: Dukungan browser untuk pemilih CSS tidak konsisten, namun Anda dapat menggunakan petunjuk online untuk memeriksa apakah pemilih tertentu berfungsi di browser target Anda.
Universal
Pemilih universal memungkinkan Anda menggunakan gaya di seluruh halaman. Pada dasarnya, suatu gaya tidak menentukan elemen tertentu, kelas, dll., sehingga berlaku untuk semua elemen pada halaman. Ini berguna untuk mengatur warna, font, dll.
Pemilih universal dapat digunakan untuk semua elemen pada halaman, namun dapat diganti oleh penyeleksi tertentu. Spesifikasi CSS menyatakan bahwa tanda bintang (*) dapat digunakan untuk mewakili pemilih universal. Listing A menunjukkan cara menggunakan pemilih universal untuk mengatur latar belakang dan font default untuk halaman.
jenis
Salah satu cara paling umum untuk menata suatu elemen adalah melalui tipenya. Artinya, elemen tertentu memiliki gaya yang ditentukan sendiri, dan gaya ini dapat digunakan untuk semua elemen jenis tersebut, apa pun posisi elemen di laman. Contoh di Listing B menunjukkan penggunaan pemilih tipe untuk menata gaya semua elemen segmen pada halaman.
Dengan jenis pemilih ini, semua elemen paragraf di dalam daun (kecuali ditimpa oleh pemilih yang lebih spesifik) memiliki margin dan teks merah tertentu. Sekarang Anda juga dapat membuat kelas CSS Anda sendiri untuk menangani penataan gaya elemen tertentu pada halaman.
baik
Pemilih kelas memberi Anda kontrol lebih besar dibandingkan pemilih tipe ketika memutuskan apa yang dicakup oleh suatu gaya. Gaya yang ditentukan oleh pemilih kelas dapat diterapkan ke semua elemen dengan atribut kelas, terlepas dari posisi elemen pada halaman. Ini memberikan kontrol besar atas elemen mana yang menerima gaya. Contoh di Listing C menunjukkan penggunaan kelas untuk memformat paragraf pertama saja di halaman. Jadi paragraf pertama fontnya bergerigi, dan paragraf berikutnya berbeda.
Pemilih kelas tidak dapat menggunakan elemen khusus HTML seperti judul, p, h1, dll. Anda juga dapat menggunakan beberapa kelas untuk elemen yang sama dengan memisahkannya menggunakan spasi. Listing D menunjukkan penggunaan beberapa kelas untuk menata paragraf tertentu.
Anda dapat menggabungkan pemilih kelas dengan pemilih tipe untuk menata gaya elemen tertentu yang telah menetapkan kelas. Dalam skenario ini, saat mendefinisikan gaya, nama elemen memiliki nama kelas yang dipisahkan dengan spasi. Contoh pada Listing E mendemonstrasikan teknik dimana hanya elemen segmen yang diberi nama kelas tertentu yang diberi gaya dengan satu cara, sedangkan header yang memiliki nama kelas yang sama diberi gaya dengan cara lain. Saya akan menjelaskan lebih detail saat menggunakan atribut ID elemen.