CSS Geavanceerde Syntax

Groeperen van selectors

Je kunt selectors groeperen, zodat de gegruppere selectoren dezelfde verklaringen kunnen delen. Gebruik komma's om de te groeperen selectors te onderscheiden. In het volgende voorbeeld hebben we alle titel-elementen gegroepeerd. Alle titel-elementen zijn groen.

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

Erfstructuur en problemen

Volgens CSS erven onderliggende elementen eigenschappen van hun ouder-element. Maar het werkt niet altijd op deze manier. Kijk naar de volgende regel:

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

Volgens deze regel zal het body-element van de site het lettertype Verdana gebruiken (als de gebruiker het lettertype in zijn systeem heeft).

Door CSS-erfstructuur, zullen onderliggende elementen de eigenschappen van het hoogste element erven (in dit voorbeeld het body-element), zoals p, td, ul, ol, ul, li, dl, dt en dd. Er zijn geen extra regels nodig; alle onderliggende elementen van body moeten de lettertype Verdana weergeven, evenals de onderliggende elementen van deze elementen. En in de meeste moderne browsers is dit ook zo.

Maar in die bloederige jaren van de browseroorlog hoeft dit niet altijd te gebeuren, want destijds was de ondersteuning van standaarden geen prioriteit voor bedrijven. Neem bijvoorbeeld Netscape 4, die erfstructuur niet ondersteunde; het negeerde niet alleen erfstructuur, maar ook de regels die van toepassing waren op het body-element. Tot en met IE6 op Windows bestond er een probleem met de weergave van lettertypen in tabellen. Wat moeten we dan doen?

Zacht voor Netscape 4

Gelukkig kun je het probleem met oude browsers die de erfstructuur niet begrijpen oplossen door gebruik te maken van de zogenaamde regel "Zacht voor Netscape 4".

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

Browsers versie 4 kunnen erfenis niet begrijpen, maar ze kunnen groepselectors begrijpen. Hoewel dit enige bandbreedte van gebruikers verspilt, moet dit gebeuren om Netscape 4-gebruikers te ondersteunen.

Is erfenis een vloek?

Als je niet wilt dat de "Verdana, sans-serif" lettertype wordt geërfd door alle subelementen, wat moet je dan doen? Bijvoorbeeld, je wilt dat de lettertype van de alinea Times is. Geen probleem. Maak een speciale regel voor p, zodat het de regels van het ouder-element ontlokt:

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