Memulai CSS
CSS bergantung pada aturan pencocokan pola untuk menentukan gaya mana yang berlaku untuk elemen mana dalam dokumen. Pola ini disebut pemilih dan rentangnya dari nama tag (misalnya, p untuk mencocokkan tag paragraf) dengan pola yang sangat rumit yang cocok dengan bagian-bagian dokumen yang sangat spesifik (misalnya, p # myid> b.highlight akan cocok dengan tag b apa pun dengan kelas sorotan yang merupakan anak paragraf dengan id myid).
Pemilih CSS adalah bagian dari pemanggilan gaya CSS yang mengidentifikasi bagian halaman web mana yang harus ditata. Pemilih berisi satu atau beberapa properti yang menentukan bagaimana HTML yang dipilih akan ditata.
The CSS Selectors
Ada beberapa jenis pemilih:
- ketik pemilih - mencocokkan elemen tertentu
- pemilih kelas — elemen yang cocok dengan kelas tertentu
- Penyeleksi ID — cocok dengan elemen dengan ID khusus
- pemilih keturunan — elemen yang cocok yang merupakan turunan dari elemen tertentu
- pemilih anak — elemen pencocokan yang merupakan anak dari elemen tertentu
- pemilih universal — cocok dengan elemen apa pun
- pemilih berselingkuh yang berdekatan — elemen yang cocok dengan segera didahului oleh elemen tertentu
- penyeleksi atribut — elemen yang cocok dengan atribut tertentu atau nilai atribut
- pemilih kelas pseudo — elemen yang cocok dengan kelas pseudo tertentu
- pemilih pseudo-element — elemen yang cocok dengan properti pseudo-element tertentu
Format Gaya CSS dan Selektor CSS
Format gaya CSS terlihat seperti ini:
selector {style property: style; }
Pisahkan beberapa pemilih yang memiliki gaya yang sama dengan koma. Ini disebut pengelompokan pemilih. Sebagai contoh:
selector1 , selector2 {style property: style; }
Pengelompokan pengelompokan adalah mekanisme singkat untuk menjaga gaya CSS Anda tetap ringkas.
Pengelompokan di atas akan memiliki efek yang sama seperti:
selector1 {properti gaya: gaya; }
selector2 {style property: style; }
Selalu Uji Pemilih CSS Anda
Tidak semua browser mendukung semua pemilih CSS. Jadi pastikan untuk menguji pemilih Anda di sebanyak mungkin browser di banyak sistem operasi yang Anda bisa. Tetapi jika Anda menggunakan pemilih CSS 1 atau CSS2 Anda harus baik-baik saja.