Pri določanju slogov se pogosto zgodi, da več različnim elementom določimo popolnoma enake oblikovne lastnosti. V takem primeru ni treba za vsak element posebej ponavljati istega pravila. CSS omogoča, da več selektorjev združimo v eno samo pravilo, kar zmanjša količino kode in izboljša njeno preglednost.
Pomni: Če več selektorjev uporablja iste deklaracije, jih lahko združimo v en seznam selektorjev, ločen z vejicami.
Osnovna pravila
Ko več elementov dobi enake slogovne lastnosti, lahko njihove selektorje zapišemo skupaj. Tak zapis imenujemo združevanje selektorjev oziroma seznam selektorjev. Selektorje združujemo tako, da jih ločimo z vejico. Presledek za vejico ni obvezen, je pa priporočljiv zaradi boljše berljivosti kode.
h1, h2, p {
text-align: center;
color: blue;
}Združevanje selektorjev izboljša doslednost slogov in zmanjša velikost slogovne datoteke, saj se iste deklaracije ne ponavljajo pri več ločenih pravilih.
Primerjave
Spodnja primera sta po učinku enakovredna. Razlika je v tem, da je združen zapis krajši in preglednejši.
Ponavljanje istih pravil
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}Združen zapis selektorjev
h1, h2, p {
text-align: center;
color: blue;
}| Način zapisa | Značilnost |
|---|---|
| ločena pravila | enake deklaracije se ponavljajo pri več selektorjih |
| združeni selektorji | več selektorjev deli isti blok deklaracij |
Pozor: Združujemo samo tiste selektorje, ki imajo res enake deklaracije. Če se pravila razlikujejo, združevanje ni smiselno, saj lahko zmanjša preglednost kode.
Zgledi
Spodnji primer pokaže, kako lahko tri selektorje združimo v en sam zapis:
h1, h2, p {
text-align: center;
color: blue;
}Pri daljšem seznamu selektorjev je pogosto pregledneje, da vsakega zapišemo v svojo vrstico:
h1,
h2,
p {
text-align: center;
color: blue;
}Tak zapis je posebej uporaben pri daljših seznamih, ker je berljivejši in lažje ga je urejati.
Priporočila
- Selektorje združi takrat, ko imajo popolnoma enake deklaracije.
- Za vejico piši presledek ali selektorje zapiši vsakega v svojo vrstico.
- Združene selektorje uporabljaj za krajšo, bolj pregledno in lažje vzdrževano kodo.
- Pri daljših seznamih uporabi večvrstični zapis, da ostane pravilo pregledno.
Pogoste napake
- Ponavljanje enakih deklaracij pri več ločenih pravilih brez potrebe.
- Manjkajoča vejica med selektorji.
- Združevanje selektorjev, ki nimajo popolnoma enakih slogovnih lastnosti.
- Nepregleden zapis predolgega seznama selektorjev v eni vrstici.
Če je v seznamu selektorjev neveljaven selektor, je pri običajnem seznamu selektorjev neveljavno celotno pravilo. Zato moramo biti pri zapisovanju združenih selektorjev natančni.