Startpagina » Coding » De definitieve handleiding voor CSS-pseudo-klassen

    De definitieve handleiding voor CSS-pseudo-klassen

    Of u nu een beginnende of ervaren CSS-ontwikkelaar bent, u hebt waarschijnlijk wel van gehoord pseudo-classes. De meest bekende pseudo-klasse is waarschijnlijk : hover, waarmee we een element kunnen stijlen als het dat is in de hover-status, d.w.z. wanneer een aanwijsapparaat, zoals een muis, erop wijst.

    Naar aanleiding van het concept van onze vorige berichten op 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 staat definiëren van het bijbehorende HTML-element. We kunnen een pseudo-klasse toevoegen aan een CSS-selector met behulp van de dubbele syntaxis : zoals dit: 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 groepeer of classificeer HTML-elementen die op een of andere manier vergelijkbaar zijn.

    Pseudo-klassen zijn vergelijkbaar met hen in de zin dat ze dat ook zijn gebruikt om stijlregels toe te voegen aan de elementen met dezelfde eigenschap.

    Maar terwijl echte klassen zijn gebruiker gedefinieerde en kan worden gespot in de broncode, bijvoorbeeld

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

    Doel van pseudo-klassen

    De taak van reguliere CSS-klassen is om elementen 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 dat zijn gegeven door de ontwikkelaars zelf.

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

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

     
    [...]

    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 dat zijn niet meestal gemarkeerd in de HTML-code, maar we kunnen richt hen met pseudo-klassen in CSS, bijvoorbeeld:

    • een element dat de is laatste kind in zijn bovenliggende element
    • een link die dat is bezocht
    • een element dat verdwenen is volledig scherm.

    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 klas gebruiken .laatste 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 wanneer het laatste element verandert? Welnu, we zullen het moeten verplaatsen .laatste klasse van het vorige laatste element tot het huidige element.

    Dit gedoe van het bijwerken van klassen kan worden overgelaten aan de user-agent, tenminste voor die karakteristieken die gebruikelijk zijn onder elementen (en als laatste element is het zo gewoon als het kan krijgen). Het hebben van een vooraf gedefinieerde :laatste kind pseudo-class is inderdaad heel nuttig. Op deze manier, wij hoef niet het laatste element aan te geven in de HTML-code, 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 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 pseudo-klassen worden toegevoegd aan en verwijderd uit HTML-elementen dynamisch, gebaseerd op de staat waarin ze overstappen in reactie op de interacties van de gebruiker. Enkele van de voorbeelden van dynamische pseudoklassen zijn : hover, :focus, :link, en : visited, die allemaal kunnen worden toegevoegd aan de ankertag.

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

    2. Pseudo-klassen op basis van de staat

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

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