CSS handler om styling av websider, nettsteder, HTML -dokumenter osv. Derfor tilbyr det mange stylingverktøy som velger, CSS -egenskaper osv. Velgerne er den opprinnelige komponenten i CSS -regler, reglene som retter seg mot noen HTML -element (er) og styler det i henhold til noen spesifikke CSS -egenskaper.

I CSS klassifiseres velgerne i fem kategorier I.e. Grunnleggende velgere, kombinasjonsvelgere, pseudoklasse-utvalgere og attributt utvalgere. Grunnkategorien består av en elementvelger, klassevelger, ID -velger, universalvelger og grupperingsvelger. Du kan lære mer om de grunnleggende velgerne i veiledningene våre CSS -velgere.

Denne oppskrivningen vil forklare følgende terminologier:

• Hva er en grupperingsvelger i CSS?
• Grunnleggende syntaks for grupperingsvelger.
• Hvordan gruppere flere HTML -elementer ved hjelp av en grupperingsvelger.

La oss komme i gang med den grunnleggende forståelsen av grupperingsvelger:

Hva er en grupperingsvelger i CSS

Gruppelektoren retter seg mot flere HTML -elementer og stiler dem samtidig. Det er en kortfattet kode og reduserer den ekstra innsatsen. Mens vi velger/grupperer mer enn ett HTML -element, må vi skille hvert HTML -element med komma.

Syntaks

La oss se på følgende utdrag for å forstå syntaksen til grupperingsvelgeren:

I figuren ovenfor er P, H2, H3 og bunntekst HTML -elementer gruppert sammen for å bli stylet.

La oss flytte et skritt videre for å forstå konseptet med å gruppere velgeren ved hjelp av et eksempel:

Hvordan gruppere flere HTML -elementer ved hjelp av en grupperingsvelger

La oss se på det undergitte eksemplet for å forstå hvordan man implementerer en unik stil på en gruppe av forskjellige HTML-elementer:

Eksempel Dette eksemplet har forskjellige HTML -elementer i.e.

,

, og

. Vi må style alle disse elementene i kursiv fontstil, med den kongeblå bakgrunnsfargen.

Html

Linuxhint.com

Hei! Velkommen til Linuxhint.com

Gruppering av velgeren

Dette er et eksempel på grupperingsvelger

CSS

H1, H2, P
Bakgrunnsfarge: RoyalBlue;
Font-stil: kursiv;

Den ovennevnte koden grupperte tre elementer, implementerer samme stil på alle elementene, og som et resultat vil vi få følgende utgang:

Det verifiserer at alle elementene implementerer samme stil og grupperingsvelgeren fungerer som den skal.

Konklusjon

For å implementere en grupperingsvelger alt du trenger å gjøre er å bare skrive alle elementets navn du vil style og legge til et komma mellom hvert element. På denne måten vil den spesifiserte stilen bli implementert til hvert målrettet element samtidig. Denne oppskrivningen dekker alle aspekter av gruppering av velgerne, med utgangspunkt i det som er gruppelektor og hvordan du bruker det.