Syntaks Tingkat Lanjut CSS

Pemilihan grup selector

Anda dapat menggabungkan selector, sehingga selector yang digabungkan dapat berbagi deklarasi yang sama. Gunakan koma untuk memisahkan selector yang harus digabungkan. Dalam contoh di bawah ini, kami menggabungkan semua elemen judul. Semua elemen judul adalah hijau.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Warisan dan masalahnya

Menurut CSS, elemen anak akan mewarisi atribut dari elemen induk. Tetapi ini tidak selalu bekerja seperti yang diharapkan. Lihat aturan di bawah ini:

body {
     font-family: Verdana, sans-serif;
     }

Menurut aturan di atas, elemen body situs akan menggunakan huruf Verdana (jika font ini ada di sistem pengunjung).

Dengan warisan CSS, elemen anak akan mewarisi atribut dari elemen tingkat tertinggi (di contoh ini adalah body) yang dimiliki (elemen anak seperti p, td, ul, ol, ul, li, dl, dt, dan dd). Tidak perlu aturan lain, semua anak elemen body harus menampilkan huruf Verdana, dan anak anaknya juga.

Tapi di zaman perang browser yang berdarah, hal ini tidak tentu akan terjadi, saat itu dukungan standar bukan prioritas pilihan bisnis. Contohnya, Netscape 4 tidak mendukung warisan, dia tidak hanya mengecualikan warisan, tetapi juga mengecualikan aturan yang berlaku untuk elemen body. IE/Windows sampai IE6 masih ada masalah yang relevan, gaya tulis di dalam tabel akan diabaikan. Bagaimana kami berbuat dengan hal ini?

Sopan kepada Netscape 4

Beruntungnya, Anda dapat mengatasi masalah penyesuaian browser lama yang tidak mengerti warisan dengan aturan penggandaan yang kami sebut "Be Kind to Netscape 4".

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

Browser versi 4.0 tidak mengerti warisan, tetapi mereka dapat mengerti pemilihan grup. Ini akan menghabiskan beberapa bandwith pengguna, tetapi jika harus mendukung pengguna Netscape 4, maka hal ini harus dilakukan.

Pengambilan warisan adalah dosa?

Jika Anda tidak ingin font "Verdana, sans-serif" diwariskan ke semua elemen anak, apa yang harus dilakukan? Misalnya, Anda ingin font paragraf adalah Times. Tidak ada masalah. Buat aturan khusus untuk p, sehingga ia akan melepaskan aturan orang tua:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }