Pseudoklasser i CSS | Forklart

Styling HTML -elementer på grunnlag av staten de er i kan være en interessant oppgave som kan forbedre det generelle utseendet og brukeropplevelsen til et nettsted. CSS gir visse klasser for denne oppgaven, som blir referert til som pseudoklasser. Dette innlegget er designet for å kaste lys på pseudoklasser og deres bruk. Før vi hopper til hovedemnet vårt, ta en titt på innholdet du vil gå gjennom i dette innlegget.

1. Hva er pseudoklasser
2. : lenke klasse
3. : Besøkt klasse
4. : Hoppklasse
5. : aktiv klasse
6. : Fokusklasse
7. : First-Child Class
8. : lang klasse

La oss komme i gang.

Hva er pseudoklasser

Pseudoklasser i CSS beskriver en unik tilstand av et HTML-element, og basert på disse tilstandene kan spesialeffekter legges til elementer ved å bruke en CSS-velger sammen med disse klassene.

Syntaks

Valg: Pseudoklasse

Eiendomsverdi;

Det er forskjellige pseudoklasser i CSS, men vi kommer til å diskutere noen viktige i denne oppskrivningen.

: lenke klasse

Denne klassen brukes til å style en lenke som ennå ikke er besøkt.

Eksempel

Anta at du vil legge til en lenke til nettstedet ditt og gi den en viss stil når den ikke besøkes av brukeren ennå. Følg koden nedenfor.

Linux hint

I koden ovenfor har vi gitt en lenke til HREF -attributtet til ankerkoden, og ved å bruke: Link -klassen gir vi den den grønne fargen når den er i sin uovertrufne tilstand.

Produksjon

Koblingen ble stylet med suksess ved å bruke: Link -klassen.

: Besøkt klasse

Denne klassen brukes til å style en lenke som brukeren har besøkt.

Eksempel

Eksemplet nedenfor viser arbeidet med: Besøkte klassen Følg eksemplet nedenfor.

Linux hint

Her tildeler vi fargen grønn til den besøkte tilstanden til lenken. Det betyr at når du åpner lenken, vil fargen endre seg til grønn.

Produksjon

Før du besøker lenken.

Når du besøker lenken.

Den besøkte tilstanden til lenken ble stylet ved hjelp av: Besøkte klassen.

: Hoppklasse

Denne klassen brukes til å style et element når en musemarkør blir brakt over den.

Eksempel

Anta at du vil fremheve et element hver gang brukeren bringer musen over det aktuelle elementet.

Ta med mus over meg

I koden ovenfor har vi opprettet en

element og brukte: Hover -klassen for å gi den en gul farge. Nå hver gang du tar med musen på elementet, vil fargen endre seg til gul.

Produksjon

: Soverklassen fungerer som den skal.

: aktiv klasse

Denne klassen brukes til å style et element når den er aktiv.

Eksempel

Anta at du vil at en lenke skal endre fargen når den klikkes.

Linux hint

Nå når brukeren klikker på lenken, vil fargen på lenken i det øyeblikket endre seg til rosa.

Produksjon

Før du klikker på lenken.

Når lenken er klikket.

Den aktive tilstanden til lenken ble vellykket stylet.

: Fokusklasse

Denne klassen brukes til å style et element når den er under fokus.

Eksempel

La oss style et inngangsfelt ved å endre bakgrunnsfarge når en bruker bringer fokus på det ved å klikke på det.

Skriv inn navnet ditt:

I henhold til koden ovenfor, når en bruker klikker på inngangsfeltet, vil bakgrunnsfargen endre seg til rosa.

Produksjon

Bakgrunnsfargen på inngangsfeltet endret seg vellykket.

: First-Child Class

Denne klassen brukes til å style det første barnet til et spesifisert element.

Eksempel

Anta at du bare vil bruke CSS -eiendom på det første barnet til et DIV -element. Bruk følgende kode.

Dette avsnittet er det første barnet til Div

Dette avsnittet er det andre barnet til Div

I koden ovenfor bruker vi: First-Child-klassen for å justere teksten til

element som er elementets første barn.

Produksjon

Den første

Elementet ble på linje med høyre ved hjelp av: First-Child Class.

: lang klasse

Denne klassen brukes til å spesifisere et språk som skal brukes i et bestemt element. Denne klassen kommer til nytte når du spesifiserer regler for flere språk i et dokument.

Eksempel

I eksemplet nedenfor spesifiserer vi noen regler for

element med attributt lang = “en”. Disse reglene vil bli brukt på alle

element som har denne attributtet.

Dette er første avsnitt.

Dette er andre avsnitt.

Dette er tredje avsnitt.

Produksjon

Som du kan se at den første og den tredje

elementer har attributtet lang = “en” Derfor vil regler definert for denne klassen bare gjelde på den første og den tredje

elementer.

Konklusjon

Pseudoklasser beskriver en unik tilstand av et HTML-element, og basert på disse tilstandene kan spesialeffekter legges til elementer. Det er mange pseudoklasser i CSS, men noen av de viktige er: Link Class,: Besøkt klasse,: Hover Class,: Active Class,: Focus Class,: First-Child Class, og: Lang Class. Disse klassene er forklart i dybden i dette innlegget sammen med deres relevante eksempler.