Få mere magt over dine webdesigns ved hjælp af disse avancerede CSS-vælgere.

CSS understøtter en række vælgere til at identificere elementer til styling, hver med sit eget sæt regler. Mens de fleste udvælgelsesmetoder er ligetil, giver pseudo-klasser og pseudo-elementer mere fleksibilitet. De lader dig vælge elementer baseret på deres tilstand eller position i en struktur, eller de vælger specifikke dele af indholdet.

Disse vælgere kan være vanskelige at bruge, og det er nemt at blande pseudo-klasser med pseudo-elementer, så hvordan skelner du mellem dem?

Forståelse af CSS Pseudo-klasser

En CSS-pseudo-klasse er som et specielt nøgleord, du kan bruge med vælgere til at style elementer på forskellige måder. Disse søgeord hjælper dig med at målrette elementer, når visse ting sker, som når en bruger holder musen over et element, klikker på det eller indtaster noget i et inputfelt.

Pseudo-klasser gør din webside mere interaktiv og responsiv ved at ændre, hvordan elementer ser ud eller opfører sig baseret på brugerhandlinger. Når du

instagram viewer
bruge dem med andre CSS-vælgere, giver de præcis kontrol over styling og interaktivitet.

CSS Pseudo-klasse syntaks og brug

Syntaksen for en CSS-pseudoklasse består af et kolon (:) efterfulgt af navnet på en pseudo-klasse. Her er den grundlæggende syntaks:

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

I denne syntaks:

  • vælger refererer til det eller de elementer, du vil vælge og anvende typografier på. Det kan være et HTML-element, en klasse, et ID eller en mere kompleks vælger som en kombination. Vælgeren er valgfri, men du vil normalt bruge en; uden det, vil din pseudo-klasse målrette mod alle elementer, den kan anvende til.
  • pseudo-klasse er det søgeord, der repræsenterer en bestemt tilstand eller tilstand, du vil målrette mod.

CSS kategoriserer pseudo-klasser i flere grupper baseret på deres funktionalitet og de forhold, de målretter mod. Her er hovedkategorierne sammen med nogle eksempler:

Brugerinteraktion

:hover

Vælger et element, når musemarkøren svæver over det.

:aktiv

Vælger et element, når en bruger aktiverer det, typisk ved at klikke.

:besøgt

Vælger links, som brugeren har besøgt.

Strukturel

:første barn

Vælger det første underordnede element i en forælder.

:sidste barn

Vælger det sidste underordnede element i en forælder.

:nth-child (n)

Vælger elementer baseret på deres placering i en forælder, så du kan målrette mod specifikke børn.

Form-relateret

:handicappet

Vælger deaktiverede formularelementer.

: tjekket

Vælger afkrydsede alternativknapper eller afkrydsningsfelter.

UI-elementtilstand

:ugyldig

Vælger ugyldige formularelementer.

:påkrævet

Vælger påkrævede felter med formularelementer.

:valgfri

Vælger formularelementer, der er valgfrie felter.

Link-relateret

:link

Vælger ubesøgte links.

Sprogbaseret

:lang()

Vælger elementer baseret på det sprog, der er angivet i deres "lang"-attribut.

Du kan prøve et almindeligt eksempel ved anvendelse af :hover-effekter på billeder i et galleri. Typiske stilarter inkluderer at forstørre eller falme disse billeder, når nogen svæver over dem.

Udforskning af CSS Pseudo-elementer

Et CSS-pseudo-element er som et specielt nøgleord, du kan bruge med vælgere til at style specifikke dele af et elements indhold eller til at indsætte yderligere indhold. Disse søgeord giver dig mulighed for at målrette og style elementer baseret på deres indholdsstruktur.

Pseudo-elementer forbedre din websides design og layout ved at give dig muligheden for at style elementer på måder, der traditionelt kun var mulige med rigtige HTML-elementer.

CSS Pseudo-Element syntaks og implementering

Pseudo-elementer i CSS har en specifik syntaks, der involverer brug af to koloner (::) efterfulgt af navnet på pseudo-elementet. Her er den grundlæggende syntaks:

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

I denne syntaks:

  • vælger målretter mod det element, som du vil anvende pseudoelementet på. Det kan være en hvilken som helst gyldig CSS-vælger, inklusive ingen overhovedet.
  • pseudo-element er navnet på det pseudo-element, du vil målrette mod. Du kan kun bruge ét pseudo-element i en vælger, da de ikke rigtig giver mening i kombination.

Her er nogle af pseudo-elementerne:

::Før

Indsætter indhold før indholdet af det valgte element.

::efter

Indsætter indhold efter indholdet af det valgte element.

:: første bogstav

Styler det første bogstav i teksten i et element.

::udvælgelse

Styler den del af teksten, som en bruger har valgt med deres markør.

:: markør

Styler markørboksen for et listeelement (f.eks. punktopstillingen eller nummeret på en liste).

:: stikord

Anvender stilarter på signaler i medieelementer som

Det ::før og ::efter pseudoelementer kan være særligt vanskelige at forstå, så at øve dem vil hjælpe dig med at mestre resten.

Ligheder og forskelle

Her er lighederne og forskellene mellem CSS pseudo-klasser og pseudo-elementer:

Pseudo-klasser

Pseudo-elementer

Syntaks

Præfikset med et enkelt kolon (:).

Præfikset med to koloner (::).

Brug

Vælg og stil elementer baseret på deres tilstand, position eller brugerinteraktion.

Style specifikke dele af et elements indhold, eller opret virtuelle elementer.

Vælgere

Kan forekomme på et hvilket som helst tidspunkt i en kompleks eller sammensat selektor.

Skal være den sidste komponent i en vælger og kan kun vises én gang.

Indholdsindsættelse

Indsætter ikke indhold, primært til styling baseret på tilstand.

Kan indsætte indhold eller virtuelle elementer før eller efter det valgte elements indhold.

Typografisk styling

Bruges typisk ikke til typografisk stil.

Bruges til tekst og typografisk stil (f.eks. ::første linje, ::første bogstav).

Målrettede dele

Målretter mod hele elementer.

Målretter mod specifikke dele af et elements indhold.

Browser support

Generelt godt understøttet.

Generelt godt understøttet, men nogle ældre browsere kan have begrænset understøttelse.

Pseudo-klasser og pseudo-elementer er vigtige i CSS for at skabe forskellige stilarter og interaktive funktioner. Selvom de har nogle ligheder, har de hver deres unikke roller inden for webdesign og udvikling.

Pseudo-klasser og pseudo-elementer i aktion

Du kan øve dig i at bruge CSS pseudo-klasser og pseudo-elementer i forskellige projekter for at vurdere din forståelse. Eksempler på nemme projekter, du kan lave, omfatter blandt andet profilkort, navigationsmenuer og listestyling. Disse projekter giver praktisk erfaring til at forbedre dine CSS-færdigheder, mens interaktivitet og stil integreres i dine webdesigns.