CSS -velgere

CSS (akronym av Cascading Style Sheet) tilbyr noen mønstre som retter seg mot HTML -element (er) og implementerer en viss stil etter vårt valg på dem kjent som CSS -velgere. Disse velgerne finner HTML -elementene basert på id, klasse, type, etc.

Lurer du på hvordan CSS -velgere fungerer? Ingen bekymringer! Denne artikkelen vil demonstrere en detaljert forståelse av CSS -velgere med eksempler. La oss begynne med syntaksen først:

Syntaks

Syntaksen for å skrive en CSS-velger vises i det undergitte utdraget:

Her er “P” velgeren som vil konvertere avsnittets farge til grønn.

Typer CSS -velgere

CSS tilbyr forskjellige typer velgere hver type eier forskjellig funksjonalitet. Denne artikkelen vil dekke følgende typer:

• elementvelger
• Klassevelger
• ID -velger
• gruppering av velgeren
• universell velger

Elementvelger

I CSS, elementvelger brukes til å målrette HTML -elementene i henhold til navnet deres.

Følgende kode vil for eksempel implementere svart bakgrunnsfarge med grønn tekstfarge til alle avsnitt ved hjelp av elementvelger:

Velgere

Fronteutvikling

Backend Development

Den undergitte utgangen vil demonstrere arbeidet med CSS-elementvelgeren:

Klassevelger

CSS Class Selector brukes til å målrette HTML -elementene med spesifikt klassenavn. Syntaksen til klassevelgeren inkluderer en periode (.) etterfulgt av klassenavnet.

.Klassenavn CSS-Eiendom: Verdi

I syntaksen ovenfor er "ClassName" en klasseleser.

La oss vurdere et eksempel som vil målrette mot overskriften, og avsnittelementene som bruker klasselektoren som vist i koden nedenfor:

Velgere

Fronteutvikling

Backend Development

I dette eksemplet ".stil ”er klassevelger som spesifiserer noen egenskaper. I kroppsdelen

, og begge deler

elementer har klassenavnet "Style".

Utdraget nedenfor viser utdata fra ovennevnte kodebit:

ID -velger

I CSS, ID -velger Målet HTML -elementene basert på ID -attributtet. Hash -tegnet (#) etterfulgt av elementets ID brukes til ID -velger.

La oss vurdere et eksempel som vil implementere den spesifiserte stilen på HTML -elementet med ID = "Style" som vist nedenfor:

Velgere

Fronteutvikling

Backend Development

ID -velgeren implementert på

Element vil gi følgende utgang:

Nå må du tenke hva som er forskjellen mellom ID -velgeren og klasseleseren?

ID er en unik identifikator som betyr at når vi brukte ID -en for ett element, kan den samme IDen ikke brukes andre steder i samme dokument. Hvis vi bruker samme ID to ganger i et dokument, vil CSS bruke stylingen på den siste. Mens klasser er gode klassifiserere er de ikke unike i naturen.

Gruppering av velgeren

Grupperingsvelgeren målretter flere elementer med samme stil. Grupperingsvelgeren benyttet ',' mellom flere utvalgere.

La oss vurdere et eksempel som vil implementere den samme stylingen til de flere elementene som vist i følgende utdrag:

Velgere

Fronteutvikling

Backend Development

Dette er en bunntekst

Følgende utgang vil bekrefte at grupperingsvelgeren brukte samme styling til

og elementer:

Universell velger

De universell velger implementerer styling til alle elementene i dokumentet. Et "*" -tegn brukes til å implementere den universelle velgeren. Følgende kode vil for eksempel bruke den gitte stilen på alle HTML -elementene:

Velgere

Fronteutvikling

Backend Development

Dette er en bunntekst

Ovennevnte kode implementerer hele dokumentet, og som et resultat får vi følgende utdata:

Konklusjon

CSS -velgere finner/målretter HTML -elementene og implementerer noen stylingegenskaper på dem. Det er mange typer CSS-velgere, denne oppskrivningen dekket noen få av dem som Element Selector og Class Selector basert på henholdsvis elementnavnet og klassenavnet på elementet. Hver type utfører forskjellige funksjonaliteter som ID -velger implementerer noen handlinger basert på elementets ID, grupperer velgeren målretter mot flere elementer, universell velger påvirker hele dokumentet, og så videre.