CSS Avanceret Syntaks

Veljers gruppering

Du kan gruppere veljere for at grupperte veljere kan dele de samme deklarasjonene. Bruk komma for å skille valjere som skal grupperes. I dette eksempelet grupperer vi alle overskriftselementene. Alle overskriftselementene er grønne.

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

Arv og problemer

Ifølge CSS arver underordnede elementer egenskaper fra overordnede elementer. Men det fungerer ikke alltid slik. Se nedenfor:

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

Ifølge denne regelen vil nettstedets body-element bruke Verdana-skrifttype (hvis skriften finnes i besøkerens system).

Gjennom CSS-arv vil underordnede elementer arve egenskaper fra den høyeste elementet (i dette tilfellet body). Det er ingen behov for ekstra regler; alle body-underordnede elementer skal vise Verdana-skrifttype, og også underordnede til disse elementene. Og dette er faktisk tilfelle i de fleste moderne nettlesere.

Men i den blodige tid med nettleserkrig, skjedde dette ikke nødvendigvis, da støtte til standarder ikke alltid var bedriftens prioritet. For eksempel støttet Netscape 4 ikke arv, og det ignorerte ikke bare arv, men også regler som påvirket body-elementet. IE/Windows hadde fortsatt problemer med dette helt til IE6, hvor skrifttypestiler i tabeller ble ignorert. Hva skal vi gjøre da?

Vær nettleser 4 venlig

Heldigvis kan du håndtere problemet med gamle nettlesere som ikke forstår arv ved å bruke regelen vi kaller "Vær Nettleser 4 Venlig".

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

Browser version 4.0 kan ikke forstå arv, men de kan forstå gruppevælger. Dette vil dog spilde nogle brugernes bredbånd, men hvis det er nødvendigt at støtte Netscape 4 brugere, må man gøre dette.

Er arv en forbandelse?

Hvis du ikke ønsker, at "Verdana, sans-serif" skrifttypen skal arves af alle underelementer, hvad skal du så gøre? For eksempel, hvis du ønsker, at afsnittets skrifttype er Times. Intet problem. Opret en speciel regel for p, så vil den undslippe forældres regler:

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;
     }