CSS gir flere måter å endre utseendet til et element. CSS -velgere er en av dem, velgerne lar oss målrette mot et HTML -element og spesifisere en stil etter vårt valg på et hvilket som helst HTML -element.

I CSS er det fem kategorier av velgere i.e. Enkel, kombinator, pseudoklasse, pseudo-element og attributtvelger. Denne oppskrivningen presenterer en detaljert oversikt over en av de enkle velgerne jeg.e. Klassevelger og det vil diskutere følgende terminologier relatert til klassevelger:

• Hva er en klasselytter
• Grunnleggende syntaks for klassevelgeren
• Hvordan du bruker klasselytter
• Hvordan bruke klasselektor for noen spesifikke HTML -elementer

La oss starte denne diskusjonen med den grunnleggende definisjonen av klassevelger:

Klassevelger i CSS

En klassevelger er rettet mot elementet (e) med spesifikke klassenavn (er). Følgende syntaks vil gi deg mer klarhet om klasselektoren.

Syntaks

Den grunnleggende syntaksen starter med en prikk “.”Etterfulgt av klassenavn som representerer at det er en klasseleser.

I figuren ovenfor ".”Viser at det er en CSS -klasselektor,“ Style ”representerer klassenavnet.

Hvordan du bruker CSS -klasselektor

CSS Class Selector kan brukes til å angi stilen til noen spesifikke HTML -elementer.

Eksempel

La oss ta en titt på den undergitte koden, den bruker klasselektoren til å style noen spesifikke HTML-elementer.

CSS Class Selector

Første avsnitt

Andre avsnitt

Ovennevnte kode bruker to klasseselgere. De

Og først

Element bruker samme klasse slik at den samme stilen blir implementert, mens den andre

Elementet vil bli stylet annerledes:

Hvordan bruke CSS -klasselektor for spesifikke HTML -elementer

Vi kan bruke CSS -klasselektoren for å påvirke spesifikke HTML -elementer. For dette formålet må vi spesifisere elementets navn før prikken “.”, Som vist i følgende figur:

Figuren ovenfor beskriver som velger alle

elementer som har klassenavnet "stil" og setter bakgrunnsfargen som blå.

Eksempel

I dette eksemplet er Style1 -klassen spesifisert til

og

elementer. Imidlertid bare

Elementer som har klasseattributtet “Style1” kan få tilgang til stylingegenskapene til Style1 og

elementet vil forbli ustylt.

CSS Class Selector

Første avsnitt

Andre avsnitt

Produksjon

Hvordan implementere flere stiler på HTML -element

Som et HTML -element kan ha flere klassenavn i klasseattributtet, slik at vi kan bruke forskjellige stylinger basert på klassenavnene.

Eksempel

I koden nedenfor vil første ledd implementere egenskapene til begge stilklasser.

CSS Class Selector

Første avsnitt

Andre avsnitt

Ovennevnte kode vil generere følgende utgang:

Utgangen verifiserer at første ledd bruker egenskapene til begge klassene 'Style' og 'Style1'.

Konklusjon

En klassevelger velger HTML -elementet for styling i CSS ved å bruke klassenavnet, og det starter med en prikk ".”Etterfulgt av klassenavnet. Denne oppskrivningen presenterer en omfattende oversikt og kjernekonsept for CSS Class Selectors, hvordan du bruker klasseselgere, hvordan du bruker en klasselektor for noen spesifikke HTML-elementer ved hjelp av eksempler.