Få mer makt over webdesignene dine ved å bruke disse avanserte CSS-velgerne.

CSS støtter en rekke velgere for å identifisere elementer for styling, hver med sitt eget sett med regler. Mens de fleste utvelgelsesmetoder er enkle, gir pseudo-klasser og pseudo-elementer mer fleksibilitet. De lar deg velge elementer basert på deres tilstand eller posisjon i en struktur, eller de velger spesifikke deler av innholdet.

Disse velgerne kan være vanskelige å bruke, og det er enkelt å blande opp pseudo-klasser med pseudo-elementer, så hvordan skiller du mellom dem?

Forstå CSS Pseudo-klasser

En CSS-pseudoklasse er som et spesielt nøkkelord du kan bruke med velgere for å style elementer på forskjellige måter. Disse søkeordene hjelper deg med å målrette elementer når visse ting skjer, for eksempel når en bruker holder musen over et element, klikker på det eller skriver inn noe i et inndatafelt.

Pseudo-klasser gjør nettsiden din mer interaktiv og responsiv ved å endre hvordan elementer ser ut eller oppfører seg basert på brukerhandlinger. Når du

instagram viewer
bruk dem med andre CSS-velgere, gir de nøyaktig kontroll over styling og interaktivitet.

CSS Pseudo-klasse syntaks og bruk

Syntaksen for en CSS-pseudoklasse består av et kolon (:) etterfulgt av navnet på en pseudoklasse. Her er den grunnleggende syntaksen:

selector:pseudo-class {
/* styles */
}

I denne syntaksen:

  • velger refererer til elementet eller elementene du vil velge og bruke stiler på. Det kan være et HTML-element, en klasse, en ID eller en mer kompleks velger som en kombinasjon. Velgeren er valgfri, men du vil vanligvis bruke en; uten den vil pseudoklassen din målrette mot alle elementene den kan gjelde for.
  • pseudo-klasse er søkeordet som representerer en bestemt tilstand eller tilstand du vil målrette mot.

CSS kategoriserer pseudoklasser i flere grupper basert på deres funksjonalitet og forholdene de retter seg mot. Her er hovedkategoriene sammen med noen eksempler:

Brukerinteraksjon

:sveve

Velger et element når musepekeren svever over det.

:aktiv

Velger et element når en bruker aktiverer det, vanligvis ved å klikke.

:besøkt

Velger lenker som brukeren har besøkt.

Strukturell

:første barn

Velger det første underordnede elementet til en forelder.

:siste barn

Velger det siste underordnede elementet til en forelder.

:nth-child (n)

Velger elementer basert på deres posisjon i en forelder, slik at du kan målrette mot bestemte barn.

Skjemarelatert

:funksjonshemmet

Velger deaktiverte skjemaelementer.

:krysset av

Velger avmerkede alternativknapper eller avmerkingsbokser.

UI Element State

:ugyldig

Velger ugyldige skjemaelementer.

:påkrevd

Velger nødvendige felt med skjemaelementer.

:valgfri

Velger skjemaelementer som er valgfrie felt.

Link-relatert

:link

Velger ubesøkte lenker.

Språkbasert

:lang()

Velger elementer basert på språket som er spesifisert i deres "lang"-attributt.

Du kan prøve et vanlig eksempel ved bruke :hover-effekter på bilder i et galleri. Typiske stiler inkluderer å forstørre eller falme disse bildene når noen svever over dem.

Utforsker CSS Pseudo-elementer

Et CSS-pseudo-element er som et spesielt nøkkelord du kan bruke med velgere for å style spesifikke deler av et elements innhold eller for å sette inn ekstra innhold. Disse søkeordene lar deg målrette og style elementer basert på innholdsstrukturen deres.

Pseudo-elementer forbedre nettsidens design og layout ved å gi deg muligheten til å style elementer på måter som tradisjonelt bare var mulig med ekte HTML-elementer.

CSS Pseudo-Element syntaks og implementering

Pseudo-elementer i CSS har en spesifikk syntaks som innebærer bruk av to kolon (::) etterfulgt av navnet på pseudoelementet. Her er den grunnleggende syntaksen:

selector::pseudo-element {
/* styles */
}

I denne syntaksen:

  • velger målretter mot elementet du vil bruke pseudoelementet på. Det kan være en hvilken som helst gyldig CSS-velger, inkludert ingen i det hele tatt.
  • pseudo-element er navnet på pseudoelementet du vil målrette mot. Du kan bare bruke ett pseudo-element i en velger siden de egentlig ikke gir mening i kombinasjon.

Her er noen av pseudo-elementene:

::før

Setter inn innhold før innholdet i det valgte elementet.

::etter

Setter inn innhold etter innholdet i det valgte elementet.

::første bokstav

Stiler den første bokstaven i teksten i et element.

:: utvalg

Stiler tekstdelen som en bruker har valgt med markøren.

::markør

Stiler markeringsboksen til et listeelement (f.eks. punktpunktet eller nummeret i en liste).

:: stikkord

Bruker stiler på signaler i medieelementer som

De ::før og ::etter pseudoelementer kan være spesielt vanskelig å forstå, så å øve på dem vil hjelpe deg med å mestre resten.

Likheter og ulikheter

Her er likhetene og forskjellene mellom CSS-pseudo-klasser og pseudo-elementer:

Pseudo-klasser

Pseudo-elementer

Syntaks

Prefiks med et enkelt kolon (:).

Prefiks med to kolon (::).

Bruk

Velg og stil elementer basert på deres tilstand, posisjon eller brukerinteraksjon.

Stil spesifikke deler av et elements innhold eller lag virtuelle elementer.

Velgere

Kan forekomme når som helst i en kompleks eller sammensatt velger.

Må være den siste komponenten i en velger og kan bare vises én gang.

Innsetting av innhold

Setter ikke inn innhold, først og fremst for styling basert på tilstand.

Kan sette inn innhold eller virtuelle elementer før eller etter det valgte elementets innhold.

Typografisk styling

Brukes vanligvis ikke til typografisk stil.

Brukes til tekst og typografisk stil (f.eks. ::første linje, ::første bokstav).

Målrettede deler

Målretter mot hele elementer.

Målretter mot bestemte deler av innholdet til et element.

Nettleserstøtte

Generelt godt støttet.

Generelt godt støttet, men noen eldre nettlesere kan ha begrenset støtte.

Pseudo-klasser og pseudo-elementer er viktige i CSS for å lage ulike stiler og interaktive funksjoner. Selv om de har noen likheter, har de hver sin unike rolle innen webdesign og utvikling.

Pseudo-klasser og pseudo-elementer i aksjon

Du kan øve på å bruke CSS-pseudo-klasser og pseudo-elementer i forskjellige prosjekter for å vurdere din forståelse. Eksempler på enkle prosjekter du kan gjøre inkluderer blant annet profilkort, navigasjonsmenyer og listestyling. Disse prosjektene gir praktisk erfaring for å forbedre CSS-ferdighetene dine samtidig som interaktivitet og stil integreres i webdesignene dine.