nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


De definitieve handleiding voor CSS-pseudo-klassen

Of je nu een beginnende of ervaren CSS-ontwikkelaar bent, je hebt waarschijnlijk wel eens gehoord van pseudo-klassen . De meest bekende pseudo-klasse is waarschijnlijk :hover, wat ons in staat stelt een element te stylen wanneer het zich in zweeftoestand bevindt, dwz wanneer een aanwijsapparaat, zoals een muis, erop staat.

In navolging van het concept van onze vorige berichten over marge: auto en CSS Floats, nemen we een diepgaandere blik op pseudo-klassen in dit bericht. We zullen zien wat pseudo-klassen echt zijn, hoe ze werken, hoe we ze kunnen categoriseren en hoe ze verschillen van pseudo-elementen .

Wat zijn pseudo-klassen?

Een pseudo-klasse is een sleutelwoord dat we aan CSS-selectors kunnen toevoegen om een speciale status van het bijbehorende HTML-element te definiëren . We kunnen een pseudo-klasse toevoegen aan een CSS-selector door de dubbele puntsyntaxis te gebruiken : als volgt: a:hover{ ... }

Een CSS-klasse is een attribuut dat we kunnen toevoegen aan HTML-elementen waarvoor we dezelfde stijlregels willen toepassen, zoals hoofdmenu-items of titels van zijbalk-widgets. Met andere woorden, we kunnen CSS-klassen gebruiken om HTML-elementen te groeperen of classificeren die op de een of andere manier vergelijkbaar zijn.

Pseudo-klassen lijken op hen, in die zin dat ze ook worden gebruikt om stijlregels toe te voegen aan de elementen met dezelfde eigenschap .

Maar terwijl echte klassen door de gebruiker worden gedefinieerd en bijvoorbeeld in de broncode kunnen worden gespot

pseudo-klassen worden toegevoegd door UA (user agents), zoals webbrowsers, op basis van de huidige status van het bijbehorende HTML-element.

Doel van pseudo-klassen

De taak van reguliere CSS-klassen is om elementen te classificeren of groeperen . Ontwikkelaars weten hoe hun elementen moeten worden gegroepeerd: ze kunnen klassen zoals "menu-items", "knoppen", "miniaturen" enz. Vormen om dezelfde elementen te groeperen en later te stijlen. Deze classificaties zijn gebaseerd op de kenmerken van de elementen die door de ontwikkelaars zelf worden gegeven .

Bijvoorbeeld, als een ontwikkelaar beslist om een ​​te gebruiken

als een miniatuurobject kan zij of hij dat classificeren
met een klasse "thumbnail".

[...]

HTML-elementen hebben echter hun eigen gemeenschappelijke kenmerken op basis van hun staat, positie, aard en interactie met de pagina en de gebruiker. Dit zijn de kenmerken die meestal niet worden gemarkeerd in de HTML-code, maar we kunnen ze targeten met pseudo-klassen in CSS, bijvoorbeeld:

  • een element dat het laatste kind is binnen het bovenliggende element
  • een link die wordt bezocht
  • een element dat op volledig scherm is weergegeven .

Dit zijn de kenmerken die in het algemeen het doelwit zijn van de pseudo-klassen. Om het verschil tussen klassen en pseudo-klassen beter te begrijpen, gaan we ervan uit dat we de klasse .last gebruiken om de laatste elementen in verschillende bovenliggende containers te identificeren.

  • item 1
  • item 2
  • item 3
  • item 4

We kunnen deze laatste onderliggende elementen opmaken met de volgende CSS:

 li.last {text-transform: hoofdletters; } option.last {font-style: italic; } 

Maar wat gebeurt er als het laatste element verandert? Nou, we zullen de .last klasse van het vorige laatste element naar de huidige moeten verplaatsen.

Dit gedoe van het bijwerken van klassen kan worden overgelaten aan de user-agent, althans voor die kenmerken die gebruikelijk zijn onder elementen (en als laatste element is dat hetzelfde als het kan krijgen). Het hebben van een vooraf gedefinieerde :last-child pseudo-klasse is inderdaad erg handig. Op deze manier hoeven we niet het laatste element in de HTML-code aan te geven, maar we kunnen ze nog steeds opmaken met de volgende CSS:

 li: last-child {text-transform: hoofdletter; } optie: last-child {font-style: italic; } 

Belangrijkste soorten pseudo-klassen

Er zijn veel soorten pseudo-klassen, allemaal bieden ze ons manieren om elementen te targeten op basis van hun functies die anders ontoegankelijk of moeilijker te benaderen zijn. Hier is een lijst met standaard pseudo-klassen in MDN.

1. Dynamische pseudo-klassen

Dynamische pseudoklassen worden dynamisch toegevoegd aan en verwijderd uit HTML-elementen, op basis van de status waarnaar ze overschakelen in reactie op de interacties van de gebruiker . Enkele van de voorbeelden van dynamische pseudo-klassen zijn :hover :focus :hover :link en :visited, die allemaal kunnen worden toegevoegd aan de ankertag.

 a: bezocht {color: # 8D20AE; } .knop: zweven, .knop: focus {font-weight: bold; } 

2. Op staat gebaseerde pseudo-klassen

Op status gebaseerde pseudo-klassen worden toegevoegd aan elementen wanneer ze zich in een bepaalde statische toestand bevinden . Enkele van de meest bekende voorbeelden zijn:

  • :checked dat kan worden toegepast voor selectievakjes ( )
  • :fullscreen om elk element te targeten dat momenteel wordt weergegeven in de modus Volledig scherm
  • :disabled voor HTML-elementen die zich in de uitgeschakelde modus bevinden, zoals ,