CSS Pseudo-klasser

Hvad er en pseudo-klasse?

Pseudo-klasser bruges til at definere specifikke tilstande for elementer.

For eksempel kan det bruges til:

  • Indstil stil for elementer, der er over musen
  • Indstil forskellige stiler for besøgte og ikke-besøgte links
  • Indstil stil for elementer, der får fokus
Hold musen over mig

Syntaks

Pseudo-klasses syntaks:

selector:pseudo-class {
  property: value;
}

Anker-pseudo-klasse

Links kan vises på forskellige måder:

Eksempel

/* Ikke besøgt link */
a:link {
  color: #FF0000;
}
/* Besøgt link */
a:visited {
  color: #00FF00;
}
/* Link, der er over musen */
a:hover {
  color: #FF00FF;
}
/* Valgt link */
a:active {
  color: #0000FF;
}

Prøv det selv

Bemærk:a:hover Må være efter a:link og a:visited for at kunne træde i kraft!a:active Må være efter a:hover Kan kun træde i kraft efter!

Pseudo-klasser og CSS-klasser

Pseudo-klasser kan bruges sammen med CSS-klasser:

Når du holder musen over linkene i eksemplet, ændres farven:

Eksempel

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

Prøv det selv

Hover over <div>

Brugt på <div>-elementet :hover Pseudo-klasse eksempler:

Eksempel

div:hover {
  background-color: blue;
}

Prøv det selv

En simpel værktøjsikon-musoverførsel

Placer musen over <div>-elementet for at vise <p>-elementet (lignende et værktøjsikon):

Placer musen over mig for at vise <p>-elementet.

Hehe, jeg er her!

Eksempel

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

Prøv det selv

CSS - :first-child-psykoper

:first-child Psykoper matcher med den specifikke element: Dette element er den første underelement til en anden element.

Match den første <p>-element

I nedenstående eksempel matcher vælgeren alle <p>-elementer, der er den første underelement til enhver element:

Eksempel

p:first-child {
  color: blue;
}

Prøv det selv

Match alle <p>-elementer med den første <i>-element

I nedenstående eksempel matcher vælgeren alle <i>-elementer i den første <p>-element:

Eksempel

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

Prøv det selv

Match alle <p>-elementer med alle <i>-elementer som første underelement

I nedenstående eksempel matcher vælgeren alle <i>-elementer i <p>-elementer, der er den første underelement til en anden element:

Eksempel

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

Prøv det selv

CSS - :lang-psykoper

:lang Psykoper tillader dig at definere specielle regler for forskellige sprog.

I nedenstående eksempel,:lang Definer citationstegn for <q>-elementer med attribut lang="en":

Eksempel

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Visse tekst <q lang="no">En citat i en afsnit</q> Visse tekst.</p>
</body>
</html>

Prøv det selv

Flere eksempler

Tilføj forskellige stilarter til hyperlinks
Dette eksempel viser, hvordan man tilføjer andre stilarter til hyperlinks.
Brug :focus
Dette eksempel viser, hvordan man bruger :focus-psykopen.

Alle CSS-psykoper

Vælger Eksempel Eksempelbeskrivelse
:active a:active Vælg aktive links.
:checked input:checked Vælg hvert markeret <input>-element.
:disabled input:disabled Vælg hvert deaktiveret <input>-element.
:empty p:empty Vælg hver <p>-element uden underelementer.
:enabled input:enabled Vælg hvert aktiveret <input>-element.
:first-child p:first-child Vælg hver <p>-element som den første underordnede element til dens forælder.
:first-of-type p:first-of-type Vælg hver <p>-element som den første underordnede <p>-element til dens forælder.
:focus input:focus Vælg <input>-elementer, der har fået fokus.
:hover a:hover Vælg links, der er museoverflade.
:in-range input:in-range Vælg <input>-elementer med en værdi inden for en specificeret rækkevidde.
:invalid input:invalid Vælg alle <input>-elementer med en ugyldig værdi.
:lang(language) p:lang(it) Vælg hver <p>-element med en lang-attributværdi, der starter med "it".
:last-child p:last-child Vælg hver <p>-element som den sidste underordnede element til dens forælder.
:last-of-type p:last-of-type Vælg hver <p>-element som den sidste underordnede <p>-element til dens forælder.
:link a:link Vælg alle ikke-visiterede links.
:not(selector) :not(p) Vælg hvert element, der ikke er et <p>-element.
:nth-child(n) p:nth-child(2) Vælg hver <p>-element som den anden underordnede element til dens forælder.
:nth-last-child(n) p:nth-last-child(2) Vælg hver <p>-element som den anden underordnede element til dens forælder, tæller fra den sidste underordnede element.
:nth-last-of-type(n) p:nth-last-of-type(2) Vælg hver <p>-element som den anden underordnet <p>-element til dens forælder, tæller fra den sidste underordnede element.
:nth-of-type(n) p:nth-of-type(2) Vælg hver <p>-element som den anden underordnet <p>-element til dens forælder.
:only-of-type p:only-of-type Vælg hver <p>-element som den unikke underordnet <p>-element til dens forælder.
:only-child p:only-child Vælg <p>-elementet som den unikke underordnet element til dens forælder.
:optional input:optional Vælg <input> elementer, der ikke har specificeret "required" egenskaben.
:out-of-range input:out-of-range Vælg <input> elementer, hvis værdi er uden for den specificerede rækkevidde.
:read-only input:read-only Vælg <input> elementer, der har specificeret "readonly" egenskaben.
:read-write input:read-write Vælg <input> elementer, der ikke har specificeret "readonly" egenskaben.
:required input:required Vælg <input> elementer, der har specificeret "required" egenskaben.
:root root Vælg rodlementet for elementet.
:target #news:target Vælg det aktuelle aktive #news element (klik på en URL, der indeholder dette ankernavn).
:valid input:valid Vælg alle <input> elementer med gyldige værdier.
:visited a:visited Vælg alle besøgte links.

Alle CSS pseudoelementer

Vælger Eksempel Eksempelbeskrivelse
::after p::after Indsæt indhold efter hvert <p> element.
::before p::before Indsæt indhold før hvert <p> element.
::first-letter p::first-letter Vælg første bogstav i hvert <p> element.
::first-line p::first-line Vælg første linje i hvert <p> element.
::selection p::selection Vælg den del af elementet, som brugeren har valgt.