CSS Pseudo-class Reference Manual

CSS pseudoklasse

Pseudoklassen worden gebruikt om speciale staten van elementen te definiëren.

Bijvoorbeeld, het kan worden gebruikt voor:

  • Stel stijlen in wanneer de muis over een element wordt gehouden
  • Stel verschillende stijlen in voor bezochte en onbezochte links
  • Stel stijlen in wanneer een element focus krijgt
  • Stel stijlen in voor effectieve/ineffectieve/verplichte/optionele formulierelementen

De tabel hieronder toont de verschillende pseudoklassen in CSS:

Pseudoklasse Voorbeeld Voorbeeldbeschrijving
:active a:active Kies actieve links
:any-link a:anylink Kies alle <a> of <area> elementen met een href-eigenschap.
:auto-fill input:autofill Kies alle <input> elementen die automatisch worden ingevuld door de browser.
:checked option:checked Match alle geselecteerde <input> of <option> elementen.
:default input:default Kies de standaard formulierelementen in een groep gerelateerde elementen.
:defined :defined Kies alle gedefinieerde elementen (standaard of aangepaste elementen).
:dir() :dir(rtl) Kies elementen met een specifieke tekstrichting.
:disabled option:disabled Kies alle gedeactiveerde elementen, vaak gebruikt voor formulierelementen.
:empty div:empty Kies alle elementen zonder onderliggende elementen (inclusief tekstknopen).
:enabled input:enabled Kies alle geactiveerde elementen, vaak gebruikt voor formulierelementen.
:first @page :first Stelt het eerste blad van een gedrukte document voor (gebruikt samen met @page-regels).
:first-child p:first-child Kies het element dat de eerste zoon van zijn ouder-element is (in een groep broers).
:first-of-type li:first-of-type Kies het eerste specifieke type element in een groep broers.
:focus select:focus Kies het element dat de focus heeft, vaak gebruikt voor formulierelementen.
:focus-visible button:focus-visible Kies het element dat de focus heeft (alleen van toepassing als de focus wordt toegewezen via het toetsenbord en niet via de muis).
:focus-within form:focus-within Vergelijkt elementen of elementen die op enig moment een afstammeling zijn van het element dat de focus heeft.
:fullscreen :fullscreen Kies het element dat zich in de volledige schermmodus bevindt.
:has() h2:has(+p) Kies het <h2>-element dat direct na het <p>-element komt, en toepas de stijl op het <h2>-element.
:hover a:hover Kies het element dat met de muis wordt gewezen.
:in-range input:in-range Kies het <input>-element met een waarde binnen het opgegeven bereik.
:indeterminate input:indeterminate Kies formulierelementen in een onzekere toestand.
:invalid input:invalid Kies ongeldige formulierelementen.
:is() :is(ul, ol) Selecteer alle <ul> en <ol> elementen.
:lang() p:lang(it) Kies het <p>-element met de attribute 'lang' ingesteld op 'it' (Italiaans).
:last-child li:last-child Kies het <li>-element dat de laatste zoon van zijn ouder-element is.
:last-of-type p:last-of-type Kies het <p>-element dat het laatste <p>-element van zijn ouder-element is.
:left @page :left Stelt alle linkerkanten van de pagina's van een gedrukte document voor (gebruikt samen met @page-regels).
:link a:link Kies alle niet-bezoekte links.
:modal :modal Kies de elementen in een modaal stadium.
:not() :not(p) Kies alle elementen die geen <p>-element zijn.
:nth-child() p:nth-child(2) Kies het <p>-element dat de tweede zoon van zijn ouder-element is.
:nth-last-child() p:nth-last-child(2) Select <p> elements that are the second last child of their parent element.
:nth-last-of-type() p:nth-last-of-type(2) Select <p> elements that are the second last child of their parent element.
:nth-of-type() p:nth-of-type(2) Select <p> elements that are the second <p> element of their parent element.
:only-child p:only-child Select <p> elements that are the only child of their parent element.
:only-of-type p:only-of-type Select <p> elements that are the only <p> element of their parent element.
:optional textarea:optional Select <input>, <select>, or <textarea> elements without the 'required' attribute.
:out-of-range input:out-of-range Select <input> elements whose values are out of the specified range.
:placeholder-shown input:placeholder-shown Select <input> or <textarea> elements that currently display placeholder text.
:popover-open :popover-open Select elements that are in a displayed pop-up state.
:read-only input:read-only Select input elements with the 'readonly' attribute.
:read-write input:read-write Select editable input elements.
:required input:required Select input elements with the 'required' attribute.
:right @page :right Represents all right-hand pages of the document to be printed (used with @page rules).
:root :root Select the root element of the document.
:scope :scope Select elements that are used as a reference point or range for a selector.
:state() :state() Select custom elements with a specified custom state.
:target :target Select the currently active target element.
:user-invalid :user-invalid Select form elements with invalid values (after user interaction).
:user-valid :user-valid Select form elements with valid values (after user interaction).
:valid input:valid Select all input elements with valid values.
:visited a:visited Selecteer alle bezochte links.
:where() :where(ol, ul) Selecteer alle <ul> en <ol> elementen.