CSS pseudoelement

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, 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:

Exempel

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

Prova själv

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 trying 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 for all <p> elements:

Exempel

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

Prova själv

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 (endast när "float" är "none")
  • text-transform
  • line-height
  • float
  • clear

Prettag och CSS-klasser

Prettag kan kombineras med CSS-klasser:

Exempel

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

Prova själv

Ovanstående exempel kommer att visa class="intro" avsnittets första bokstav i rött med större fontstorlek.

Flera prettag

Det är också möjligt att kombinera flera prettag.

I följande exempel kommer första bokstaven i avsnittet att vara röd med xx-large fontstorlek. Första radens övriga del kommer att bli blå och använda små kapitäl. Resten av avsnittet kommer att vara med standardfontstorlek och färg:

Exempel

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

Prova själv

CSS - ::before-prettag

::before Prettag kan användas för att infoga innehåll före elementets innehåll.

Följande exempel infogar en bild före innehållet i varje <h1>-element:

Exempel

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

Prova själv

CSS - ::after-prettag

::after Prettag kan användas för att infoga innehåll efter elementets innehåll.

Följande exempel infogar en bild efter innehållet i varje <h1>-element:

Exempel

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

Prova själv

CSS - ::selection-prettag

::selection prettag som matchar användarens valda elementdel.

Följande CSS-egenskaper kan tillämpas på ::selection:

  • color
  • background
  • cursor
  • outline

Följande exempel visar vald text på rött mot en gul bakgrund:

Exempel

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

Prova själv

Alla CSS-prettag

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

Alla CSS-pretypar

Väljare Exempel Exempelbeskrivning
:active a:active Välj aktiva länkar.
:checked input:checked Välj varje valt <input>-element.
:disabled input:disabled Välj varje inaktiverat <input>-element.
:empty p:empty Välj varje <p>-element som inte har några barn.
:enabled input:enabled Välj varje aktiverat <input>-element.
:first-child p:first-child Välj varje <p>-element som är den första barnen till sin förälder.
:first-of-type p:first-of-type Välj varje <p>-element som är den första av sin förälders typer.
:focus input:focus Välj <input>-element som har fått fokus.
:hover a:hover Välj länkar som muspekaren är över.
: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 som har en lang-egenskapsvärde som börjar med "it".
:last-child p:last-child Välj varje <p>-element som är den sista barnen till sin förälder.
:last-of-type p:last-of-type Välj varje <p>-element som är den sista av sin förälders typer.
:link a:link Välj alla länkar som inte har besökts.
: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 som är den andra barnen till sin förälder.
:nth-last-child(n) p:nth-last-child(2) Välj varje <p>-element som är den andra barnen till sin 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 som är det andra barnet till sin 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 är den andra barnet till sin förälder.
:only-of-type p:only-of-type Välj varje <p>-element som är den enda av sin typ till sin förälder.
:only-child p:only-child Välj <p>-element som är den enda barnet till sin 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 elementets rodelement.
:target #news:target Välj det aktuellt aktiva #news-elementet (klicka på URL som innehåller det angivna anknutningsnamnet).
:valid input:valid Välj alla <input>-element med giltigt värde.
:visited a:visited Välj alla besökta länkar.