Selektorer: Grupperade selektorer

Inledning
Klasser
Taggar
ID
Sammanhangsstyrda

Samla selektorerna

Ofta har man flera selektorer som har vissa egenskaper gemensamma. Det kan till exempel gälla valet av teckensnitt, textfärg och bakgrundsfärg.

Ett exempel

.rubrik {font-family: arial; color: green; background-color: #F1F1F1; font-size: 18pt;}
.mellanrubrik {font-family: arial; color: green; background-color: #F1F1F1; font-size: 14pt;}
.bildtext {font-family: arial; color: green; background-color: #F1F1F1; font-size: 8pt;}

Det enda som skiljer de olika klasserna åt är textstorleken. Då kan vi gruppera selektorerna genom att definiera de gemensamma egenskaperna på ett ställe.

.rubrik, .mellanrubrik, .bildtext {font-family: arial; color: green; background-color: #F1F1F1;}
.rubrik {font-size: 18pt;}
.mellanrubrik {font-size: 14pt;}
.bildtext {font-size: 8pt;}

Båda modellerna fungerar lika bra, men grupperingen gör att det blir mindre att skriva samtidigt som koden blir mer lättläst. Det senare förenklar en hel del när man vill ändra stilen.

Inledning
Klasser
Taggar
ID
Sammanhangsstyrda

©SupportData.Net
www.supportdata.net