CSS Pseudo-Klasses vs. Pseudo-Elementen: Een diep duik

Leonard Strauss included in Programming Web Design Css

2023-09-28 1446 words 7 minutes

Contents

CSS ondersteunt een verscheidenheid aan selectors om elementen te identificeren voor styling, elk met zijn eigen set regels. Terwijl de meeste selectiemethoden rechttoe rechtaan zijn, bieden pseudoklassen en pseudo-elementen meer flexibiliteit. Hiermee kun je elementen selecteren op basis van hun status of positie binnen een structuur, of ze selecteren specifieke delen van de inhoud.

Het kan een uitdaging zijn om deze selectors effectief te gebruiken, omdat er verwarring kan ontstaan tussen pseudo-klassen en pseudo-elementen. Hoe maak je onderscheid tussen deze twee verschillende categorieën selectors?

CSS-pseudoklasses begrijpen

Een CSS-pseudoklasse vertegenwoordigt een situationele modifier die kan worden toegepast op een selector, waardoor elementen onder specifieke omstandigheden kunnen worden gestyled. Dergelijke trefwoorden maken het mogelijk om elementen aan te passen op basis van voorvallen zoals cursorbewegingen, klikinteractie of tekstinvoer in een invoerveld.

Pseudoklassen verbeteren de interactiviteit van een website door het uiterlijk of het gedrag van elementen te wijzigen in reactie op gebruikersinteracties, wanneer ze worden gebruikt naast andere CSS-selectors, waardoor een verfijnde controle over zowel stijl als interactiviteit wordt geboden.

CSS-pseudoklasse syntaxis en gebruik

De syntaxis voor een CSS-pseudoklasse bestaat uit een dubbele punt (:) gevolgd door de aanduiding van een pseudoklasse, die als volgt is opgebouwd:

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

In deze syntaxis:

De term “selector” in CSS verwijst naar het specifieke onderdeel of de specifieke onderdelen van een HTML-document die bedoeld zijn om stilistische eigenschappen te ontvangen door de toepassing van verschillende pseudo-klassen. Selectors kunnen verschillende vormen aannemen, waaronder individuele HTML-tags, klassen, ID’s of zelfs samengestelde selecties die uit meerdere criteria bestaan. Terwijl selectors meestal worden gebruikt binnen CSS-regelsets, zou hun afwezigheid ertoe leiden dat de pseudo-klasse zijn stijlregels universeel toepast op elementen die daarvoor in aanmerking komen.

Een pseudoklasse verwijst in deze context naar een trefwoord dat een bepaalde voorwaarde of toestand aanduidt waarop men zich wil richten en die men wil aanpakken.

Pseudoklassen in CSS kunnen grofweg worden ingedeeld in verschillende categorieën, afhankelijk van hun functie en de criteria waaraan ze voldoen, waaronder:1. Klasse (algemeen): Deze pseudoklassen zijn van toepassing op alle elementen binnen een bepaalde categorie of een bepaald type. Voorbeelden zijn hover, focus en active.2. Subclass: Pseudoklassen die specifiek zijn voor bepaalde subcategorieën van een element. Bijvoorbeeld, visited is alleen voor links.3. Descendant: Pseudoklassen die elementen selecteren die een descendant hebben met specifieke eigenschappen. Een voorbeeld is :first-child.4.Kind: Selecteert elementen die kinderen zijn van een ander element. Voorbeeld: :last-child.5. Sibling: Kiest tussen twee of meer broers en zussen op basis van hun positie ten opzichte van elkaar

Gebruikersinteractie

:hover

Het script selecteert een opgegeven element wanneer de cursor erover beweegt door gebruik te maken van de ingebouwde hover-gebeurtenis in JavaScript.

:active

Wanneer een gebruiker interactie heeft met een interface-element, bijvoorbeeld door erop te klikken, selecteert het systeem dat specifieke element. Dit selectieproces zorgt voor verdere interactie en manipulatie van het gekozen element binnen het programma of de applicatie.

:visited

Selecteert links die de gebruiker heeft bezocht.

Structureel

:first-child

Gaat door elk direct child-element van een opgegeven parent node en geeft het eerste element in de reeks terug.

:last-child

Retourneert het laatste afstammende element binnen een opgegeven oudernode.

:nth-child(n)

Zoekt en kiest elementen op basis van hun hiërarchische plaatsing binnen een ouderentiteit, zodat men zich kan richten op bepaalde nakomelingen.

Vormgerelateerd

:uitgeschakeld

Selecteert uitgeschakeld vormelementen.

:checked

Selecteert aangevinkte keuzerondjes of selectievakjes.

UI Element State

:ongeldig

Selecteert ongeldige formulierelementen.

:verplicht

Selecteert verplichte velden van formulierelementen.

:optioneel

Selecteert formulierelementen die optionele velden zijn.

Link-gerelateerd

:link

Selecteert niet-bezochte links.

Op taal gebaseerd

:lang()

Zoekt en selecteert elementen op basis van de taalkundige informatie van hun “lang”-attribuut.

Er kan worden geëxperimenteerd met de toepassing van zweefeffecten op afbeeldingen in een galerij, waarbij typische stilistische keuzes bestaan uit het vergroten of dimmen van de afbeeldingen bij interactie met de muis door de gebruiker.

Het verkennen van CSS-pseudo-elementen

Het gebruik van CSS-pseudo-elementen biedt de mogelijkheid om gespecialiseerde trefwoorden te gebruiken in combinatie met selectors, waardoor bepaalde aspecten van de inhoud van een element kunnen worden gestyled of aanvullend materiaal kan worden toegevoegd. Dergelijke trefwoorden vergemakkelijken het richten en aanpassen van elementen op basis van hun structurele samenstelling.

Pseuod-elementen bieden een krachtige manier om het visuele uiterlijk en de lay-out van webpagina’s te verbeteren, waarbij de functionaliteit van traditionele HTML-elementen wordt geëvenaard door middel van stylingtechnieken. Door deze elementen te gebruiken, kunnen ontwerpers visueel aantrekkelijke ontwerpen maken met behoud van semantische integriteit.

CSS Pseudo-Element Syntaxis en Implementatie

Pseudoklassen in CSS maken gebruik van een bepaalde grammaticale structuur, die het gebruik van twee dubbele punten (::) gevolgd door de naam van de pseudoklasse inhoudt. De fundamentele expressie kan als volgt worden weergegeven:

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

In deze syntaxis:

De pseudoklasse ::before of ::after wordt toegepast op een specifiek element dat wordt gespecificeerd door de selector die erin wordt opgegeven. De selector kan elke geldige CSS-regel zijn en kan ook helemaal geen selector bevatten.

Een pseudo-element, ook bekend als een ::pseudo-element of ::pseudo, is een CSS-regel die zich richt op een specifiek deel van de structuur van een HTML-element zonder de lay-out of inhoud te beïnvloeden. Hiermee kunnen ontwikkelaars visuele effecten creëren en gebruikersinterfaces aanpassen door elementen op creatieve manieren te manipuleren. Pseudo-elementen worden meestal alleen gebruikt in selectors omdat ze bedoeld zijn om het uiterlijk van een enkel element te wijzigen in plaats van meerdere.

Hier zijn enkele pseudo-elementen:

::before

Voeg de opgegeven tekst op een specifieke positie in de inhoud van een geïdentificeerd HTML-element in, vóór de bestaande inhoud.

-|-

::after

De bewerking bestaat uit het invoegen van nieuw materiaal direct na de bestaande tekst binnen een opgegeven HTML-element, meestal aangeduid met de tagnaam of de waarde van het ID-attribuut. Dit proces wordt vaak gebruikt om extra inhoud zoals afbeeldingen, video’s of aanvullende informatie aan een bestaande webpagina toe te voegen zonder de oorspronkelijke broncode direct te hoeven wijzigen.

::first-letter

Versiert het eerste teken van de tekst in een bepaald element met stilistische verbeteringen.

::selection

Versiert het gekozen tekstfragment door de cursor van de gebruiker met een aantrekkelijk uiterlijk.

::marker

Wijzigt de visuele presentatie van een individueel item in een lijst, zoals het aanpassen van het uiterlijk van het opsommingsteken of de numerieke indicator die bij dat item hoort.

::cue

Maakt gebruik van stilistische configuraties op aanwijzingen binnen multimediaonderdelen zoals en , meestal toegepast op ondertitels en bijschriften.

Het gebruik van de ::before en ::after pseudo-elementen kan het begrip bemoeilijken, dus vertrouwdheid met deze concepten is essentieel voor vaardigheid in andere aspecten van CSS.

Overeenkomsten en verschillen

Pseudoklassen en pseudo-elementen in Cascading Style Sheets (CSS) delen bepaalde overeenkomsten, maar vertonen ook opmerkelijke verschillen.

Pseudoklassen

Pseudo-elementen

-|-|-

Syntax

Voorafgegaan door een enkele dubbele punt (:).

Voorvoegsel met twee dubbele punten (::).

Gebruik

Kies en formatteer onderdelen op basis van hun huidige status, locatie of gebruikersinteracties.

Gebruik stilistische aspecten van de inhoud van een element of genereer virtuele componenten om de visuele presentatie en gebruikerservaring te verbeteren.

Selectors

Complexe of samengestelde selectors kunnen een door komma’s gescheiden lijst van componenten bevatten en een interne drijvendekommawaarde kan overal in deze lijst worden ingevoegd.

De gegeven verklaring is op een elegante manier als volgt:Het laatste element van een selector moet dienen als het uiteindelijke bestanddeel en slechts één keer voorkomen.

Inhoud invoegen

De primaire functie van dit element is het vormgeven van tekst op basis van de huidige staat of context, in plaats van het invoegen van daadwerkelijke inhoud.

Je hebt de mogelijkheid om extra materiaal op te nemen in of toe te voegen aan de inhoud van een gespecificeerd element.

Typografische opmaak

Niet typisch gebruikt voor typografische opmaak.

Wordt gebruikt om tekstuele en typografische nuances over te brengen, zoals de stijlen ::first-line en ::first-letter.

Gerichte onderdelen

Gericht op volledige elementen.

Gericht op specifieke delen van de inhoud van een element.

Browserondersteuning

Over het algemeen goed ondersteund.

De browsercompatibiliteit van deze website is over het algemeen robuust, hoewel bepaalde verouderde browsers beperkte functionaliteit kunnen ervaren.

Pseudoklassen en pseudo-elementen spelen een cruciale rol in het verlenen van diverse stilistische eigenschappen en interactieve functionaliteiten aan websites via CSS. Hoewel ze bepaalde overeenkomsten delen, hebben ze verschillende functies met betrekking tot webontwerp en -ontwikkeling.

Pseudo-klassen en pseudo-elementen in actie

U kunt uw kennis van CSS-pseudo-klassen en -elementen vergroten door ze toe te passen bij verschillende creatieve activiteiten. Enkele eenvoudige taken die je kunt uitvoeren zijn onder andere het ontwerpen van profielkaarten, het maken van navigatiemenu’s en het verfijnen van lijststijlen. Dergelijke bezigheden leveren praktische ervaring op die zorgt voor een meer vaardige uitvoering van iemands CSS-vaardigheden en tegelijkertijd dynamiek en visuele aantrekkingskracht geeft aan hun digitale producties.