CSS Pseudo-klass Referensmanual

CSS pseudoklasser

Pseudoklasser används för att definiera elementets specialtilstånd.

Till exempel, kan det användas för:

  • Ställ in stil när användaren håller muspekaren över elementet.
  • Ställ in olika stilar för besökta och obesökta länkar.
  • Ställ in stil när elementet får fokus.
  • Ställ in stil för giltiga/ogiltiga/obligatoriska/valfria formulärelement.

Följande tabell visar olika pseudoklasser i CSS:

Pseudoklasser Exempel Exempelbeskrivning
:active a:active Välj aktiva länkar
:any-link a:anylink Välj alla <a> eller <area> element med href-attribut.
:auto-fill input:autofill Välj alla <input> element som fylls i automatiskt av webbläsaren.
:checked option:checked Matcha alla markerade <input> eller <option> element.
:default input:default Välj standardformulärelement i en grupp av relaterade element.
:defined :defined Välj alla definierade element (standard eller anpassade element).
:dir() :dir(rtl) Välj element med specifik textriktning.
:disabled option:disabled Välj alla inaktiverade element, ofta använda för formulärelement.
:empty div:empty Välj alla element utan underelement (inklusive textknoppar).
:enabled input:enabled Välj alla aktiverade element, ofta används för formulärelement.
:first @page :first Representerar det första sidan av dokumentet som ska skrivas ut (tillsammans med @page-regeln).
:first-child p:first-child Välj elementet som är det första barnet till sitt föräldrelement (i en uppsättning syskon).
:first-of-type li:first-of-type Välj den första specifika typen av element i en uppsättning syskon.
:focus select:focus Välj element som får fokus, ofta används för formulärelement.
:focus-visible button:focus-visible Välj element som får fokus (endast tillämpas på fokusstilar när fokus uppnås genom tangentbordet och inte musen).
:focus-within form:focus-within Matchar element eller dess alla efterkommande element som får fokus.
:fullscreen :fullscreen Välj element som är i fullskärmsläge.
:has() h2:has(+p) Välj <h2>-elementet som följer direkt efter <p>-elementet och tillämpa stilen på <h2>.
:hover a:hover Välj element som är överstörd av musen.
:in-range input:in-range Välj <input>-element med ett värde inom det specificerade intervallet.
:indeterminate input:indeterminate Välj formulärelement i okänd tillstånd.
:invalid input:invalid Välj ogiltiga formulärelement.
:is() :is(ul, ol) Välj alla <ul> och <ol>-element.
:lang() p:lang(it) Välj <p>-element med lang-egenskapen "it" (italienska).
:last-child li:last-child Välj <li>-elementet som är det sista barnet till sitt föräldrelement.
:last-of-type p:last-of-type Välj <p>-elementet som är det sista <p>-elementet till sitt föräldrelement.
:left @page :left Representerar alla vänster sidor av dokumentet som ska skrivas ut (tillsammans med @page-regeln).
:link a:link Välj alla ej besökta länkar.
:modal :modal Välj element i modaltilstånd.
:not() :not(p) Välj alla element som inte är <p>-element.
:nth-child() p:nth-child(2) Välj <p>-elementet som är den andra barnen till dess föräldrelement.
:nth-last-child() p:nth-last-child(2) Välj <p> element som är det andra sista barnet i sin föräldrelement.
:nth-last-of-type() p:nth-last-of-type(2) Välj <p> element som är det andra sista barnet i sin föräldrelement.
:nth-of-type() p:nth-of-type(2) Välj <p> element som är den andra <p> elementet i sin föräldrelement.
:only-child p:only-child Välj <p> element som är den enda barnen i sin föräldrelement.
:only-of-type p:only-of-type Välj <p> element som är den enda <p> elementet i sin föräldrelement.
:optional textarea:optional Välj <input>, <select> eller <textarea> element utan required-egenskapen.
:out-of-range input:out-of-range Välj <input> element med ett värde utanför det specificerade intervallet.
:placeholder-shown input:placeholder-shown Välj <input> eller <textarea> element som visar placeholder-text.
:popover-open :popover-open Välj element som är öppet i en visuell popup.
:read-only input:read-only Välj inmatningselement med readonly-egenskapen.
:read-write input:read-write Välj redigerbara inmatningselement.
:required input:required Välj inmatningselement med required-egenskapen.
:right @page :right Representerar alla högra sidor av dokumentet (används tillsammans med @page-regeln).
:root :root Välj dokumentets rodelement.
:scope :scope Välj element som är referenspunkt eller omfattning för väljare.
:state() :state() Välj anpassade element med specifik anpassad status.
:target :target Välj den aktuellt aktiva målelementet.
:user-invalid :user-invalid Välj formulärelement med ogiltiga värden (efter interaktion med användaren).
:user-valid :user-valid Välj formulärelement med giltiga värden (efter interaktion med användaren).
:valid input:valid Välj alla inmatningselement med giltiga värden.
:visited a:visited Välj alla besökta länkar.
:where() :where(ol, ul) Välj alla <ul> och <ol>-element.