Wanneer u CSS-selectors groepeert, past u dezelfde stijlen toe op verschillende elementen zonder de stijlen in uw stylesheet te herhalen. In plaats van twee, drie of meer CSS-regels te hebben die hetzelfde doen (bijvoorbeeld de kleur van iets op rood zetten), gebruikt u één enkele CSS-regel die hetzelfde bereikt. Het geheim van deze efficiëntieverhogende tactiek is de komma.
CSS-kiezers groeperen
Om CSS-kiezers in een stijlblad te groeperen, gebruik komma's om meerdere gegroepeerde selectors te scheiden in de stijl. In dit voorbeeld heeft de stijl invloed op de p- en div-elementen:
div, p { kleur: #f00; }
In deze context betekent een komma "en", dus deze selector is van toepassing op alle alinea-elementen en alle divisie-elementen. Als de komma zou ontbreken, zou de selector in plaats daarvan van toepassing zijn op alle alinea-elementen die onderliggend zijn aan een divisie. Dat is een ander soort selector, dus de komma is belangrijk.
U kunt elke vorm van selector groeperen met elke andere selector. In dit voorbeeld wordt een klassenkiezer gegroepeerd met een ID-kiezer:
p.rood, #sub { kleur: #f00; }
Deze stijl is van toepassing op elke alinea met het class-attribuut van rood en elk element (omdat de soort niet is opgegeven) met een ID-attribuut van sub.
U kunt een willekeurig aantal selectors groeperen, inclusief selectors die enkelvoudige woorden zijn en samengestelde selectors. Dit voorbeeld bevat vier verschillende selectors:
p, .red, #sub, div a: link { kleur: #f00; }
Deze CSS-regel is van toepassing op:
- Elk alinea-element
- Elk element met de klasse van rood
- Elk element met een ID van sub
- De koppeling pseudo-klasse van de ankerelementen die afstammelingen zijn van een divisie.
Die laatste selector is een samengestelde selector. Zoals te zien is, is het eenvoudig te combineren met de andere selectors in deze CSS-regel. De regel bepaalt de kleur van #f00 (rood) op deze vier selectors, wat de voorkeur verdient boven het schrijven van vier afzonderlijke selectors om hetzelfde resultaat te bereiken.
Elke selector kan worden gegroepeerd
U kunt elke geldige selector in een groep plaatsen en alle elementen in het document die overeenkomen met alle gegroepeerde elementen hebben dezelfde stijl op basis van die stijleigenschap.
Sommige ontwerpers geven er de voorkeur aan om de gegroepeerde elementen op aparte regels voor de leesbaarheid in de code. Het uiterlijk op de website en de laadsnelheid blijven hetzelfde. U kunt bijvoorbeeld stijlen, gescheiden door komma's, combineren in één stijleigenschap in één regel code:
th, td, p.red, div#firstred { kleur: rood; }
of u kunt de stijlen op afzonderlijke regels vermelden voor de duidelijkheid:
de,
td,
p.red,
div#firstred
{
kleur rood;
}
Waarom CSS-kiezers groeperen?
Het groeperen van CSS-selectors helpt de grootte van uw stylesheet te minimaliseren, zodat deze sneller laadt Toegegeven, stylesheets zijn niet de belangrijkste boosdoeners bij langzaam laden; CSS-bestanden zijn tekstbestanden, dus zelfs zeer lange CSS-bladen zijn klein in vergelijking met niet-geoptimaliseerde afbeeldingen. Toch helpt elk beetje optimalisatie, en als je je CSS wat kleiner kunt maken en de pagina's veel sneller kunt laden, is dat een goede zaak.
Het groeperen van selectors maakt het onderhoud van de site ook veel eenvoudiger. Als u een wijziging moet aanbrengen, kunt u eenvoudig een enkele CSS-regel bewerken in plaats van meerdere. Deze aanpak bespaart tijd en moeite.
Waar het op neerkomt: het groeperen van CSS-selectors verhoogt de efficiëntie, productiviteit, organisatie en in sommige gevallen zelfs de laadsnelheid.