CSS Pseudo-klasser vs. Pseudo-element: En djupdykning
CSS stöder en mängd olika väljare för att identifiera element för styling, var och en med sin egen uppsättning regler. De flesta urvalsmetoder är enkla, men pseudoklasser och pseudoelement ger mer flexibilitet. De låter dig välja element baserat på deras tillstånd eller position inom en struktur, eller så väljer de specifika delar av innehållet.
Det kan vara svårt att använda dessa väljare på ett effektivt sätt, eftersom det finns risk för förvirring mellan pseudoklasser och pseudoelement. Hur skiljer man mellan dessa två distinkta kategorier av väljare?
Förstå CSS-pseudoklasser
En CSS-pseudoklass är en situationsanpassad modifierare som kan tillämpas på en selektor, vilket möjliggör styling av element under specifika förhållanden. Sådana nyckelord gör det möjligt att rikta in element baserat på händelser som markörens hover, klickinteraktion eller textinmatning i ett inmatningsfält.
Pseudoklasser förbättrar interaktiviteten på en webbplats genom att modifiera utseendet eller beteendet hos element som svar på användarinteraktioner, när de används tillsammans med andra CSS-väljare, vilket ger förfinad kontroll över både stil och interaktivitet.
Syntax och användning av CSS-pseudoklasser
Syntaxen för en CSS-pseudoklass består av ett kolon (:) följt av beteckningen på en pseudoklass, som är strukturerad enligt följande:
selector:pseudo-class {
/* styles */
}
I denna syntax:
Termen “selector” i CSS avser den specifika komponent eller de komponenter i ett HTML-dokument som är avsedda att få stilistiska egenskaper genom tillämpning av olika pseudoklasser. Selektorer kan anta många olika former, inklusive enskilda HTML-taggar, klasser, ID:n eller till och med sammansatta urval som består av flera kriterier. Selectorer används vanligtvis inom CSS-regeluppsättningar, men om de inte används skulle pseudoklassen tillämpa sina stilregler universellt på alla kvalificerade element.
En pseudoklass är i detta sammanhang ett nyckelord som anger ett särskilt tillstånd som man vill fokusera på och åtgärda.
Pseudoklasser i CSS kan grovt delas in i olika kategorier beroende på deras funktion och de kriterier de uppfyller, vilka inkluderar:1. Klass (allmän): Dessa klasser av pseudoklasser gäller för alla element inom en viss kategori eller typ. Exempel är hover, focus och active.2. Underklass: Pseudoklasser som är specifika för vissa underkategorier av ett element. Exempelvis är visited endast för länkar.3. Descendant: Pseudoklasser som väljer element som har en efterkommande med specifika egenskaper. Ett exempel skulle vara :first-child.4.Barn: Väljer element som är barn till ett annat element. Exempel: :last-child.5. Syskon: Väljer mellan två eller flera syskon baserat på deras position i förhållande till varandra
Användarinteraktion
:hover
|
Skriptet väljer ett angivet element när markören flyttas över det genom att använda den inbyggda hover-händelsen i JavaScript.
:active
|
När en användare interagerar med ett gränssnittselement, t.ex. genom att klicka på det, kommer systemet att välja just det elementet. Denna urvalsprocess möjliggör ytterligare interaktion och manipulation av det valda elementet inom programmet eller applikationen.
:visited
|
Väljer länkar som användaren har besökt.
Struktur
:first-child
|
Itererar genom varje direkt underordnat element av en angiven överordnad nod och returnerar det första påträffade elementet i sekvensen.
:last-child
|
Hämtar det sista efterföljande elementet inom en given överordnad nod.
:nth-child(n)
|
Plockar och väljer element utifrån deras hierarkiska placering inom en överordnad enhet, vilket gör att man kan sikta in sig på vissa avkommor.
Formulärrelaterat
:disabled
|
Väljer inaktiverade formulärelement.
:checked
|
Väljer markerade radioknappar eller kryssrutor.
UI Element State
:invalid
|
Väljer ogiltiga formulärelement.
:required
|
Väljer obligatoriska fält för formulärelement.
:optional
|
Väljer formulärelement som är valfria fält.
Länkrelaterad
:länk
|
Väljer länkar som inte har besökts.
Språkbaserad
:lang()
|
Plockar och väljer element med hjälp av den språkliga information som ges av deras “lang”-attribut.
Man kan experimentera med tillämpningen av hover-effekter på bilder i ett galleri, där typiska stilistiska val innebär att förstora eller dämpa det visuella när användaren interagerar genom att hålla muspekaren över bilden.
Utforska CSS-pseudoelement
Med hjälp av CSS-pseudoelement kan man använda specialiserade nyckelord tillsammans med väljare, vilket gör det möjligt att utforma vissa aspekter av ett elements innehåll eller lägga till ytterligare material. Sådana nyckelord gör det lättare att rikta in och anpassa element efter deras strukturella sammansättning.
Pseuod-element erbjuder ett kraftfullt sätt att förbättra det visuella utseendet och layouten på webbsidor, och efterliknar funktionaliteten hos traditionella HTML-element genom stylingtekniker. Genom att använda dessa element kan designers skapa visuellt övertygande design samtidigt som semantisk integritet bibehålls.
CSS Pseudoelement Syntax och implementering
Pseudoklasser i CSS använder en särskild grammatisk struktur, som innebär att man använder två kolon (:::) följt av pseudoklassens nomenklatur. Det grundläggande uttrycket kan representeras enligt följande:
selector::pseudo-element {
/* styles */
}
I denna syntax:
Pseudoklassen ::before eller ::after tillämpas på ett specifikt element som anges av den selektor som anges inom den. Väljaren kan representera vilken giltig CSS-regel som helst och kan även inkludera ingen väljare alls.
Ett pseudoelement, även känt som ett ::pseudoelement eller ::pseudo, är en CSS-regel som riktar in sig på en specifik del av ett HTML-elements struktur utan att påverka dess layout eller innehåll. Det gör det möjligt för utvecklare att skapa visuella effekter och anpassa användargränssnitt genom att manipulera element på kreativa sätt. Pseudoelement används vanligtvis ensamma i selectors eftersom deras syfte är att modifiera utseendet på ett enda element snarare än flera.
Här är några av pseudoelementen:
::before
|
Infoga den angivna texten på en specifik position inom innehållet i ett identifierat HTML-element, före dess befintliga innehåll.
-|-
::after
|
Operationen innebär att nytt material infogas omedelbart efter den befintliga texten i ett angivet HTML-element, vanligtvis betecknat med dess taggnamn eller ID-attributvärde. Denna process används ofta för att lägga till ytterligare innehåll som bilder, videor eller kompletterande information till en befintlig webbsida utan att behöva ändra den ursprungliga källkoden direkt.
::first-letter
|
Förgyller det första tecknet i text som ingår i ett visst element med stilistiska förbättringar.
::selection
|
Förser det valda textstycket vid användarens markör med ett tilltalande utseende.
::marker
|
Ändrar den visuella presentationen av ett enskilt objekt i en lista, till exempel genom att justera utseendet på den punkt eller numeriska indikator som är kopplad till det objektet.
::cue
|
Använder stilistiska konfigurationer på signaler inom multimediakomponenter som och , som vanligtvis används i undertext- och textningssammanhang.
Att använda pseudoelementen ::before och ::after kan vara svårt att förstå, och därför är det viktigt att känna till dessa begrepp för att kunna hantera andra aspekter av CSS.
Likheter och skillnader
Pseudoklasser och pseudoelement i Cascading Style Sheets (CSS) delar vissa likheter, men uppvisar också betydande skillnader.
|
Pseudoklasser
|
Pseudoelement
-|-|-
Syntax
|
Prefix med ett enda kolon (:).
|
Prefix med två kolon (::).
Användning
|
Välj och formatera komponenter beroende på deras aktuella status, plats eller användarinteraktion.
|
Använda stilistiska aspekter av ett elements innehåll, eller generera virtuella komponenter för att förbättra visuell presentation och användarupplevelse.
Väljare
|
Komplexa eller sammansatta väljare kan innehålla en kommaseparerad lista med komponenter, och ett internt flyttalsvärde kan infogas var som helst i listan.
|
Det givna påståendet är följande på ett elegant sätt:En selektors sista element, det måste fungera som dess ultimata beståndsdel samtidigt som det bara förekommer en gång.
Content Insertion
|
Den primära funktionen för detta element är att utforma text baserat på dess aktuella tillstånd eller sammanhang, snarare än att infoga något faktiskt innehåll.
|
Du har möjlighet att antingen införliva ytterligare material i, eller lägga till det till, innehållet i ett angivet element.
Typografisk styling
|
Används normalt inte för typografisk styling.
|
Används för att förmedla textuella och typografiska nyanser, t.ex. stilarna ::first-line och ::first-letter.
Riktade delar
|
Riktar in sig på hela element.
|
Riktar in sig på specifika delar av ett elements innehåll.
Webbläsarstöd
|
Generellt bra stöd.
|
Webbläsarkompatibiliteten för denna webbplats är i allmänhet robust, även om vissa föråldrade webbläsare kan uppleva begränsad funktionalitet.
Pseudoklasser och pseudoelement spelar en avgörande roll när det gäller att ge webbplatser olika stilistiska egenskaper och interaktiva funktioner via CSS. Även om de har vissa likheter, har de olika funktioner när det gäller webbdesign och utveckling.
Pseudoklasser och pseudoelement i praktiken
Du kan förbättra din förståelse för CSS pseudoklasser och element genom att använda dem i olika kreativa sammanhang. Några enkla uppgifter som kan utföras är att utforma profilkort, skapa navigeringsmenyer och förfina liststilar, bland andra möjligheter. Sådana uppgifter ger praktisk erfarenhet som gör att man kan använda sina CSS-kunskaper på ett bättre sätt samtidigt som man ger sina digitala produktioner dynamik och visuellt tilltal.