CSS pseudo-class reference manual

CSS pseudo-klasser

Pseudo-klasser bruges til at definere elementets specifikke tilstand.

For eksempel kan det bruges til:

  • Indstil stil, når brugeren holder musen over elementet
  • Indstil forskellige stiler til besøgte og ubesøgte links
  • Indstil stil, når elementet får fokus
  • Indstil stil til gyldige/ugyldige/påkrævede/voluntary formelelementer

Følgende tabel viser de forskellige pseudo-klasser i CSS:

Pseudo-klasser Eksempel Eksempelbeskrivelse
:active a:active Vælg aktive links
:any-link a:anylink Vælg alle <a> eller <area> elementer med href-attribut.
:auto-fill input:autofill Vælg alle <input> elementer, der automatisk udfyldes af browseren.
:checked option:checked Match alle markerede <input> eller <option> elementer.
:default input:default Vælg standardformularelementer i en gruppe af relaterede elementer.
:defined :defined Vælg alle definerede elementer (standard- eller brugerdefinerede elementer).
:dir() :dir(rtl) Vælg elementer med specificeret tekstretning.
:disabled option:disabled Vælg alle deaktiverede elementer, som ofte bruges i formularelementer.
:empty div:empty Vælg alle elementer uden underelementer (inklusive tekstknuder).
:enabled input:enabled Vælg alle aktive elementer, ofte anvendt på formularelementer.
:first @page :first Repræsenterer det første side af dokumentet til udskrift (brugt sammen med @page-regler).
:first-child p:first-child Vælg elementet som den første underelement i sin forældreelement (i en gruppe af brødrene).
:first-of-type li:first-of-type Vælg den første specifikke type element i en gruppe af brødrene.
:focus select:focus Vælg elementer, der får fokus, ofte anvendt på formularelementer.
:focus-visible button:focus-visible Vælg elementer, der får fokus (kun anvendt, når fokus opnås gennem tastatur i stedet for mus).
:focus-within form:focus-within Match elementer eller deres efterkommere, der får fokus.
:fullscreen :fullscreen Vælg elementer, der er i fuldskærmstilstand.
:has() h2:has(+p) Vælg <h2>-elementet, der følger umiddelbart efter <p>-elementet, og anvend stil på <h2>.
:hover a:hover Vælg elementer, der er museoverflade.
:in-range input:in-range Vælg <input>-elementer med værdi inden for den specificerede rækkevidde.
:indeterminate input:indeterminate Vælg formularelementer i usikker tilstand.
:invalid input:invalid Vælg ugyldige formularelementer.
:is() :is(ul, ol) Vælg alle <ul> og <ol> elementer.
:lang() p:lang(it) Vælg <p>-elementer med lang-attribut "it" (italiensk).
:last-child li:last-child Vælg <li>-elementet som den sidste underelement i sin forældreelement.
:last-of-type p:last-of-type Vælg <p>-elementet som den sidste <p>-element i sin forældreelement.
:left @page :left Repræsenterer alle venstre sider af dokumentet til udskrift (brugt sammen med @page-regler).
:link a:link Vælg alle ikke-visitede links.
:modal :modal Vælg elementer, der er i modaltilstand.
:not() :not(p) Vælg alle elementer, der ikke er <p>-elementer.
:nth-child() p:nth-child(2) Vælg <p>-elementet som den anden underelement i sin forældreelement.
:nth-last-child() p:nth-last-child(2) Vælg <p>-elementer, der er den anden child i deres forældre-element.
:nth-last-of-type() p:nth-last-of-type(2) Vælg <p>-elementer, der er den anden child i deres forældre-element.
:nth-of-type() p:nth-of-type(2) Vælg <p>-elementer, der er den anden <p>-type i deres forældre-element.
:only-child p:only-child Vælg <p>-elementer, der er den eneste child i deres forældre-element.
:only-of-type p:only-of-type Vælg <p>-elementer, der er den eneste <p>-type i deres forældre-element.
:optional textarea:optional Vælg <input>, <select> eller <textarea>-elementer uden required-attribut.
:out-of-range input:out-of-range Vælg <input>-elementer med værdier uden for den specificerede rækkevidde.
:placeholder-shown input:placeholder-shown Vælg <input> eller <textarea>-elementer, der viser pladsholder-tekst.
:popover-open :popover-open Vælg elementer, der er i en vis pop-up-tilstand.
:read-only input:read-only Vælg inputelementer med readonly-attribut.
:read-write input:read-write Vælg redigerbare inputelementer.
:required input:required Vælg inputelementer med required-attribut.
:right @page :right Repræsenterer alle højre sider af dokumentet (brugt sammen med @page-regler).
:root :root Vælg dokumentets rod-element.
:scope :scope Vælg elementer som er referencepunkt eller omfang for vælgeren.
:state() :state() Vælg brugerdefinerede elementer med angivet tilstand.
:target :target Vælg den aktive mål-element.
:user-invalid :user-invalid Vælg formelelementer med ugyldige værdier (efter brugerinteraktion).
:user-valid :user-valid Vælg formelelementer med gyldige værdier (efter brugerinteraktion).
:valid input:valid Vælg alle inputelementer med gyldige værdier.
:visited a:visited Vælg alle besøgte links.
:where() :where(ol, ul) Vælg alle <ul> og <ol> elementer.