Saat Anda mengelompokkan pemilih CSS, Anda menerapkan gaya yang sama ke beberapa elemen berbeda tanpa mengulangi gaya di lembar gaya Anda. Alih-alih memiliki dua, tiga, atau lebih aturan CSS yang melakukan hal yang sama (mengatur warna sesuatu menjadi merah, misalnya), Anda menggunakan satu aturan CSS yang menyelesaikan hal yang sama. Rahasia taktik peningkatan efisiensi ini adalah koma.
Cara Mengelompokkan Pemilih CSS
Untuk mengelompokkan pemilih CSS dalam lembar gaya, gunakan koma untuk memisahkan beberapa pemilih yang dikelompokkan dalam gaya. Dalam contoh ini, gaya memengaruhi elemen p dan div:
div, p { warna: #f00; }
Dalam konteks ini, koma berarti "dan", jadi pemilih ini berlaku untuk semua elemen paragraf dan semua elemen pembagian. Jika koma hilang, pemilih malah akan berlaku untuk semua elemen paragraf yang merupakan anak dari sebuah divisi. Itu adalah jenis pemilih yang berbeda, jadi koma itu penting.
Anda dapat mengelompokkan bentuk pemilih apa pun dengan pemilih lainnya. Contoh ini mengelompokkan pemilih kelas dengan pemilih ID:
p.red, #sub { warna: #f00; }
Gaya ini berlaku untuk paragraf apa pun dengan atribut kelas merah dan elemen apa pun (karena jenisnya tidak ditentukan) dengan atribut ID sub.
Anda dapat mengelompokkan sejumlah pemilih, termasuk pemilih yang merupakan kata tunggal dan pemilih majemuk. Contoh ini mencakup empat penyeleksi yang berbeda:
p, .red, #sub, div a: link { color: #f00; }
Aturan CSS ini akan berlaku untuk:
- Elemen paragraf apa saja
- Setiap elemen dengan kelas merah
- Elemen apa pun dengan ID sub
- Itu tautan kelas semu dari elemen jangkar yang merupakan turunan dari divisi.
Selektor terakhir itu adalah pemilih majemuk. Seperti yang ditunjukkan, ini mudah digabungkan dengan pemilih lain dalam aturan CSS ini. Aturan menentukan warna #f00 (merah) pada keempat penyeleksi ini, yang lebih disukai daripada menulis empat penyeleksi terpisah untuk mencapai hasil yang sama.
Setiap Pemilih Dapat Dikelompokkan
Anda dapat menempatkan pemilih yang valid dalam grup, dan semua elemen dalam dokumen yang cocok dengan semua elemen yang dikelompokkan akan memiliki gaya yang sama berdasarkan properti gaya tersebut.
Beberapa desainer lebih suka membuat daftar elemen yang dikelompokkan pada baris terpisah untuk keterbacaan dalam kode. Tampilan di situs web dan kecepatan memuat tetap sama. Misalnya, Anda dapat menggabungkan gaya yang dipisahkan dengan koma menjadi satu properti gaya dalam satu baris kode:
th, td, p.red, div#firstred { warna: merah; }
atau Anda dapat membuat daftar gaya pada baris individual untuk kejelasan:
t,
td,
p.red,
div#firstred
{
warna merah;
}
Mengapa Pemilih CSS Grup?
Mengelompokkan pemilih CSS membantu meminimalkan ukuran lembar gaya Anda sehingga memuat lebih cepat Memang, lembar gaya bukanlah penyebab utama dalam pemuatan yang lambat; File CSS adalah file teks, jadi bahkan lembar CSS yang sangat panjang sangat kecil jika dibandingkan dengan gambar yang tidak dioptimalkan. Namun, setiap pengoptimalan membantu, dan jika Anda dapat mengurangi ukuran CSS Anda dan memuat halaman lebih cepat, itu hal yang baik.
Pengelompokan pemilih juga membuat pemeliharaan situs jauh lebih mudah. Jika Anda perlu membuat perubahan, Anda cukup mengedit satu aturan CSS, bukan beberapa aturan. Pendekatan ini menghemat waktu dan kerumitan.
Intinya: Pengelompokan pemilih CSS meningkatkan efisiensi, produktivitas, organisasi, dan dalam beberapa kasus, bahkan kecepatan memuat.