CSS valgudtryksgruppering

Vælgergruppering

Antag, at du ønsker, at h2 elementet og afsnittene skal have grå farve. For at opnå dette er den nemmeste måde at bruge følgende erklæring:

h2, p {color:gray;}

Placer h2 og p vælger på venstre side af reglen, og derefter adskille dem med komma, definerer det en regel. Stilen til højre (color:gray;) vil blive anvendt på de elementer, der refereres til af disse vælger. Kommaet fortæller browseren, at reglen indeholder to forskellige vælger. Uden dette komma vil betydningen af reglen være helt anderledes. Se efterkommer vælger.

Man kan gruppere et ubegrænset antal valgere sammen, der er ingen begrænsninger.

For eksempel, hvis du vil vise mange elementer i grå, kan du bruge en regel som denne:

body, h2, p, table, th, td, pre, strong, em {farve:grå;}

Tip:Ved at gruppere kan skabere komprimere visse typer stilarter sammen, hvilket giver en mere kompakt stilark.

Følgende to regler giver det samme resultat, men det er klart, hvilken der er lettere at skrive:

/* ingen gruppering */
h1 {farve:blå;}
h2 {farve:blå;}
h3 {farve:blå;}
h4 {farve:blå;}
h5 {farve:blå;}
h6 {farve:blå;}
/* gruppering */
h1, h2, h3, h4, h5, h6 {farve:blå;}

Prøv det selv

Gruppering tilbyder nogle interessante valg. For eksempel, alle regler i nedenstående eksempel er ækvivalente, og hver gruppe viser blot forskellige måder at gruppere valg og deklarationer på:

/* gruppe 1 */
h1 {farve:silverblik; baggrund:hvid;}
h2 {farve:silverblik; baggrund:grå;}
h3 {farve:hvid; baggrund:grå;}
h4 {farve:silverblik; baggrund:hvid;}
b {farve:grå; baggrund:hvid;}
/* gruppe 2 */
h1, h2, h4 {farve:silverblik;}
h2, h3 {baggrund:grå;}
h1, h4, b {baggrund:hvid;}
h3 {farve:hvid;}
b {farve:grå;}
/* gruppe 3 */
h1, h4 {farve:silverblik; baggrund:hvid;}
h2 {farve:silverblik;}
h3 {farve:hvid;}
h2, h3 {baggrund:grå;}
b {farve:grå; baggrund:hvid;}

prøv det selv:

Bemærk, at 'grupp 3' bruger 'deklarationsgruppering'. Vi vil senere præsentere 'deklarationsgruppering'.

Wildcard vælger

CSS2 introducerede en ny simpel vælger - den universelle vælger (universal selector), der vises som en stjerne (*). Denne vælger kan matche med hvilket som helst element, ligesom en wildcard.

For eksempel vil nedenstående regel gøre alle elementer i dokumentet røde:

* {color:red;}

Prøv det selv

Denne deklaration svarer til at liste alle elementer i dokumentet med en gruppevælger. Ved hjælp af en stjernevælger (wildcard selector) kan du med ét tastetryk (kun én stjerne) angive color-attributværdien til red for alle elementer i dokumentet.

Deklarationsgruppering

Vi kan både gruppere valgere og gruppere deklareringer.

Hvis du ønsker, at alle h1-elementer skal have en rød baggrund og vises med en 28 pixels høj Verdana-skrifttype i blå tekst, kan du skrive følgende stil:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Men denne metode er ikke særligt effektiv. Især er det besværligt at oprette en liste over stイルer for et element med mange stイルer. I stedet kan vi gruppere deklareringerne sammen:

h1 {font: 28px Verdana; color: white; background: black;}

Dette har den samme effekt som de tre linjer med stilskema foran.

Bemærk, det er meget vigtigt at gruppere deklareringerne, og bruge semikoler ved hver deklarations afslutning. Browseren ignorerer blankstof i stilskemaet. Sørg for at bruge semikoler, og brug følgende format til at oprette stイルer uden bekymring:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Prøv det selv

Hvordan, synes denne skrivemåde ikke mere læsbar?

Men hvis den anden semikolons placering overses, vil brugeragenten fortolke stイルシート som følger:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Prøv det selv

Fordi background ikke er en gyldig værdi for color, og da kun en nøgleværdi kan angives for color, vil brugeragenten fuldstændigt ignorere denne color-deklaration (inklusive background: black). Derfor vil h1-titlen kun vises i blå farve, uden rød baggrund, og det er mere sandsynligt, at h1 ikke vises i blå farve overhovedet. I stedet vil disse titler kun vises i standardfarve (som regel sort) og uden nogen baggrundsfarve. font: 28px Verdana-deklarationen fungerer stadig korrekt, fordi den faktisk afsluttes med et semikolon.

Som valgudtryksgruppering er erklæringsgruppering også en bekvem metode til at forkorte stilark, gøre dem klarere og lettere at vedligeholde.

Tip:Det er en god vane at tilføje et semikolon efter den sidste erklæring i en regel. Når du tilføjer en ny erklæring, behøver du ikke bekymre dig om at glemme at tilføje et semikolon.

Kombination af valgudtryksgruppering og erklæringsgruppering

Vi kan kombinere valgudtryksgruppering og erklæringsgruppering i en regel for at definere komplekse stiler med færre sætninger.

De følgende regler angiver en kompleks stil for alle titler:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Prøv det selv

Denne regel definerer stilen for alle titler som grå tekst med hvid baggrund, med en indre kant af 10 pixel og en solid kant på 1 pixel, med teksts skrifttype Verdana.