CSS pseudo-elementer

What is a pseudo-element?

CSS pseudo-elements are used to set the style of the specified part of the element.

For example, it can be used for:

  • Set the style of the first letter and first line of the element
  • Insert content before or after the content of the element

Syntax

The syntax of pseudo-elements:

selector::pseudo-element {
  property: value;
}

::first-line pseudo-element

::first-line Pseudo-elements are used to add special styles to the first line of the text.

The following example adds styles to the first line of all <p> elements:

Eksempel

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Prøv det selv

Note:::first-line Pseudo-elements can only be applied to block-level elements.

The following properties apply to ::first-line Pseudo-element:

  • font property
  • color property
  • background property
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Please noteDouble colon notation - ::first-line Contrast :first-line

In CSS3, double colons replace the single-colon notation of pseudo-elements. This is the W3C's attempt to distinguishPseudo-classAndPseudo-elementAttempt.

In CSS2 and CSS1, pseudo-classes and pseudo-elements both use single-colon syntax.

For backward compatibility, CSS2 and CSS1 pseudo-elements can accept single-colon syntax.

::first-letter pseudo-element

::first-letter Pseudo-elements are used to add special styles to the first letter of the text.

The following example sets the format of the first letter of the text in all <p> elements:

Eksempel

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Prøv det selv

Note:::first-letter Pseudo-elements are only applicable to block-level elements.

The following properties apply to the ::first-letter pseudo-element:

  • font property
  • color property
  • background property
  • margin property
  • padding property
  • border property
  • text-decoration
  • vertical-align (kun når "float" er "none")
  • text-transform
  • line-height
  • float
  • clear

Tilføjelseselementer og CSS-klasser

Tilføjelseselementer kan kombineres med CSS-klasser:

Eksempel

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Prøv det selv

Det øverste eksempel vil vise class="intro" afsnittets første bogstav med rød farve og større skrifttype.

Flere tilføjelseselementer

Man kan også kombinere flere tilføjelseselementer.

I det følgende eksempel vil afsnittets første bogstav være rødt med en skriftstørrelse på xx-large. Første linjes øvrige del vil blive blå, og bruge små store bogstaver. Resten af afsnittet vil være med standard skriftstørrelse og farve:

Eksempel

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Prøv det selv

CSS - ::before-tilføjelseselement

::before Tilføjelseselementer kan bruges til at indsætte indhold før elementets indhold.

Følgende eksempel indsætter et billede før indholdet i hvert <h1>-element:

Eksempel

h1::before {
  content: url(smiley.gif);
}

Prøv det selv

CSS - ::after-tilføjelseselement

::after Tilføjelseselementer kan bruges til at indsætte indhold efter elementets indhold.

Følgende eksempel indsætter et billede efter indholdet i hvert <h1>-element:

Eksempel

h1::after {
  content: url(smiley.gif);
}

Prøv det selv

CSS - ::selection-tilføjelseselement

::valgt tilføjelseselementer, der matcher brugerens valgte elementdel.

Følgende CSS-ejenskaber kan anvendes på ::valgt:

  • color
  • background
  • cursor
  • outline

Følgende eksempel viser valgt tekst med rød farve på gul baggrund:

Eksempel

::selection {
  color: red; 
  background: yellow;
}

Prøv det selv

Alle CSS-tilføjelseselementer

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 hver <p>-element.
::first-line p::first-line Vælg første linje i hver <p>-element.
::valgt p::valgt Vælg den del af elementet, der er valgt af brugeren.

Alle CSS pseudo-klasser

Vælger Eksempel Eksempelbeskrivelse
:aktiv a:aktiv Vælg aktive links.
:markeret input:markeret Vælg hver markeret <input>-element.
:deaktiveret input:deaktiveret Vælg hver deaktiveret <input>-element.
:tom p:tom Vælg hver <p>-element uden underliggende elementer.
:aktiveret input:aktiveret Vælg hver aktiveret <input>-element.
:første(barn) p:første(barn) Vælg hver <p>-element som den første underliggende element af sin forælder.
:første(til-type) p:første(til-type) Vælg hver <p>-element som den første underliggende element af sin forælder.
:fokus input:fokus Vælg <input>-elementer, der har fokus.
:over a:over Vælg links, der er mouse-over.
:inde-til-rækkevidde input:inde-til-rækkevidde Vælg <input>-elementer med en værdi inden for en bestemt rækkevidde.
:ugyldig input:ugyldig Vælg alle <input>-elementer med en ugyldig værdi.
:lang(sprog) p:lang(it) Vælg hver <p>-element med en lang-attributværdi, der starter med "it".
:til-sidst(barn) p:til-sidst(barn) Vælg hver <p>-element som den sidste underliggende element af sin forælder.
:til-sidst(til-type) p:til-sidst(til-type) Vælg hver <p>-element som den sidste underliggende element af sin forælder.
:link a:link Vælg alle ubesøgte links.
:not(selector) :not(p) Vælg hver element, der ikke er et <p>-element.
:barn(n) p:barn(2) Vælg hver <p>-element som den anden underliggende element af sin forælder.
:til-sidst(barn(n) p:til-sidst(barn(2)) Vælg hver <p>-element som den anden underliggende element af sin forælder, tæller fra den sidste underliggende element.
:til-sidst(til-type(n) p:til-sidst(til-type(2)) Vælg hver <p>-element, der er den anden <p>-element til deres forælder, tæller fra den sidste efterkommer.
:nth-of-type(n) p:nth-of-type(2) Vælg hver <p>-element, der er den anden <p>-element til deres forælder.
:only-of-type p:only-of-type Vælg hver <p>-element, der er den eneste <p>-element til deres forælder.
:only-child p:only-child Vælg <p>-elementer som den eneste barn til deres forælder.
:optional input:optional Vælg <input>-elementer uden "required"-egenskaben.
:out-of-range input:out-of-range Vælg <input>-elementer med værdier 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 uden "readonly"-egenskaben.
:required input:required Vælg <input>-elementer, der har specificeret "required"-egenskaben.
:root root Vælg roden til elementet.
:target #news:target Vælg det aktuelle aktive #news-element (klik på 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.