CSS pseudo-class

Vad är en pseudoklass?

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

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

  • Ställ in stilen när muspekaren är över elementet
  • Ställ in olika stilar för besökta och ej besökta länkar
  • Ställ in stilen för elementet när det får fokus
Placera muspekaren över mig

Syntax

Pseudoklassens syntax:

selector:pseudo-class {
  property: value;
}

Ankkarpseudoklasser

Länkar kan visas på olika sätt:

Exempel

/* Ej besökt länk */
a:link {
  color: #FF0000;
}
/* Besökt länk */
a:visited {
  color: #00FF00;
}
/* Länk med muspekare */
a:hover {
  color: #FF00FF;
}
/* Vald länk */
a:active {
  color: #0000FF;
}

Prova själv

Observera:a:hover Måste definieras i CSS-definitionen a:link Och a:visited För att aktiveras!a:active Måste definieras i CSS-definitionen a:hover Efter att ha definierats, aktiveras de! Pseudoklassens namn är inte känsligt för storleksbokstäver.

Pseudoklasser och CSS-klasser

Pseudoklasser kan användas tillsammans med CSS-klasser:

När du håller muspekaren över länken i exempel, ändras färgen:

Exempel

a.highlight:hover {
  color: #ff0000;
}

Prova själv

När muspekaren är över <div>

Använd på <div>-elementet :hover Pseudoklassens exempel:

Exempel

div:hover {
  background-color: blue;
}

Prova själv

En enkel verktygsradsverknad med muspekare

Dra muspekaren över <div>-elementet för att visa <p>-elementet (liknande en verktygsradsverknad):

Dra muspekaren över mig för att visa <p>-elementet.

Hehe, jag är här!

Exempel

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Prova själv

CSS - :first-child-pseudoklassen

:first-child Pseudoklassen matchar med den specifika elementen: det är den första barnen till ett annat element.

Matcha den första <p>-elementen

I följande exempel matchar väljaren alla <p>-element som är den första barnen till någon annan element:

Exempel

p:first-child {
  color: blue;
}

Prova själv

Matcha alla <i>-element inom alla <p>-element

I följande exempel matchar väljaren alla <i>-element inom den första <i>-elementen i alla <p>-element:

Exempel

p i:first-child {
  color: blue;
}

Prova själv

Matcha alla <i>-element inom den första <p>-elementen

I följande exempel matchar väljaren alla <i>-element inom <p>-element som är den första barnen till en annan element:

Exempel

p:first-child i {
  color: blue;
}

Prova själv

CSS - :lang-pseudoklassen

:lang Pseudoklasser tillåter dig att definiera specifika regler för olika språk.

I följande exempel::lang Definiera citat för <q>-element med egenskapen lang="en":

Exempel

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Prova själv

Mer exempel

Lägg till olika stilar till hyperlänkar
Detta exempel visar hur man lägger till andra stilar till hyperlänkar.
Använd :focus
Detta exempel visar hur man använder :focus-prettypen.

Alla CSS-prettypar

Väljare Exempel Exempelbeskrivning
:active a:active Välj aktiva länkar.
:checked input:checked Välj varje markerat <input>-element.
:disabled input:disabled Välj varje inaktiverad <input>-element.
:empty p:empty Välj varje <p>-element utan underliggande element.
:enabled input:enabled Välj varje aktiverat <input>-element.
:first-child p:first-child Välj varje <p>-element till det första barnen till dess förälder.
:first-of-type p:first-of-type Välj varje <p>-element till det första <p>-elementet till dess förälder.
:focus input:focus Välj <input>-element som har fokus.
:hover a:hover Välj länkar som muspekaren pekar på.
:in-range input:in-range Välj <input>-element med värden inom ett specifikt intervall.
:invalid input:invalid Välj alla <input>-element med ogiltiga värden.
:lang(language) p:lang(it) Välj varje <p>-element med ett språkattribut som börjar med "it".
:last-child p:last-child Välj varje <p>-element till den sista barnen till dess förälder.
:last-of-type p:last-of-type Välj varje <p>-element till den sista <p>-elementet till dess förälder.
:link a:link Välj alla inte besökta länkar.
:not(selector) :not(p) Välj varje element som inte är ett <p>-element.
:nth-child(n) p:nth-child(2) Välj varje <p>-element till den andra barnen till dess förälder.
:nth-last-child(n) p:nth-last-child(2) Välj varje <p>-element till den andra barnen till dess förälder, räknat från den sista barnen.
:nth-last-of-type(n) p:nth-last-of-type(2) Välj varje <p>-element till den andra <p>-elementet till dess förälder, räknat från den sista barnen.
:nth-of-type(n) p:nth-of-type(2) Välj varje <p>-element som den andra <p>-elementet till dess förälder.
:only-of-type p:only-of-type Välj varje <p>-element som den unika <p>-elementet till dess förälder.
:only-child p:only-child Välj <p>-elementet som den unika barnen till dess förälder.
:optional input:optional Välj <input> element utan "required"-egenskapen.
:out-of-range input:out-of-range Välj <input> element med värde utanför det specificerade intervallet.
:read-only input:read-only Välj <input> element som har specificerat "readonly"-egenskapen.
:read-write input:read-write Välj <input> element utan "readonly"-egenskapen.
:required input:required Välj <input> element som har specificerat "required"-egenskapen.
:root root Välj roden till elementet.
:target #news:target Välj det aktuellt aktiva #news elementet (klicka på URL som innehåller det angivna ankkennamnet).
:valid input:valid Välj alla <input> element med giltigt värde.
:visited a:visited Välj alla besökta länkar.

Alla CSS pseudoelement

Väljare Exempel Exempelbeskrivning
::after p::after Infoga innehåll efter varje <p> element.
::before p::before Infoga innehåll innan varje <p> element.
::first-letter p::first-letter Välj första bokstaven i varje <p> element.
::first-line p::first-line Välj första raden i varje <p> element.
::selection p::selection Välj den del av elementet som användaren har valt.