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

Voorbeeld

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

Probeer het zelf

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

Voorbeeld

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

Probeer het zelf

Note:::first-letter Pseudo-elements only apply 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 (alleen wanneer "float" "none" is)
  • text-transform
  • line-height
  • float
  • clear

Pseudoelementen en CSS-klassen

Pseudoelementen kunnen worden gecombineerd met CSS-klassen:

Voorbeeld

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

Probeer het zelf

Deze voorbeeld toont de eerste letter van de paragraaf met class="intro" in rood en met een grotere lettergrootte.

Meerdere pseudoelementen

Men kan ook meerdere pseudoelementen combineren.

In het volgende voorbeeld zal de eerste letter van de alinea rood zijn met een lettergrootte van xx-large. De overige tekst van de eerste regel zal blauw zijn en in kleine letters worden weergegeven. De overige tekst van de alinea zal de standaard lettergrootte en kleur hebben:

Voorbeeld

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

Probeer het zelf

CSS - ::before pseudoelement

::before Pseudoelementen kunnen gebruikt worden om inhoud in te voegen voor de inhoud van een element.

Het volgende voorbeeld voegt een afbeelding in voor de inhoud van elk <h1>-element:

Voorbeeld

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

Probeer het zelf

CSS - ::after pseudoelement

::after Pseudoelementen kunnen gebruikt worden om inhoud in te voegen na de inhoud van een element.

Het volgende voorbeeld voegt een afbeelding in na de inhoud van elk <h1>-element:

Voorbeeld

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

Probeer het zelf

CSS - ::selection pseudoelement

::selection pseudoelementen die overeenkomen met de geselecteerde elementen van de gebruiker.

De volgende CSS-eigenschappen kunnen worden toegepast op ::selection:

  • color
  • background
  • cursor
  • outline

Het volgende voorbeeld maakt geselecteerde tekst rood weergeven op een gele achtergrond:

Voorbeeld

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

Probeer het zelf

Alle CSS-pseudoelementen

Selector Voorbeeld Voorbeeld beschrijving
::after p::after Voeg inhoud in na elke <p>-element.
::before p::before Voeg inhoud in voor elke <p>-element.
::first-letter p::first-letter Kies de eerste letter van elk <p>-element.
::first-line p::first-line Kies de eerste regel van elk <p>-element.
::selection p::selection Kies het gedeelte van het element dat door de gebruiker is geselecteerd.

Alle CSS-pseudoklassen

Selector Voorbeeld Voorbeeld beschrijving
:active a:active Kies elke actieve link.
:checked input:checked Kies elk <input>-element dat is aangevinkt.
:disabled input:disabled Kies elk <input>-element dat is uitgeschakeld.
:empty p:empty Kies elke <p>-element zonder kind-elementen.
:enabled input:enabled Kies elk <input>-element dat is ingeschakeld.
:first-child p:first-child Kies elke <p>-element die de eerste kind is van zijn ouder.
:first-of-type p:first-of-type Kies elke <p>-element die de eerste kind is van zijn ouder.
:focus input:focus Kies elk <input>-element dat gefocust is.
:hover a:hover Kies elke link waarop de muis over is.
:in-range input:in-range Kies elke <input>-element met een waarde binnen een specifieke range.
:invalid input:invalid Kies elke <input>-element met een ongeldige waarde.
:lang(language) p:lang(it) Kies elke <p>-element waarvan de waarde van de lang-attribuut begint met "it".
:last-child p:last-child Kies elke <p>-element die de laatste kind is van zijn ouder.
:last-of-type p:last-of-type Kies elke <p>-element die de laatste kind is van zijn ouder.
:link a:link Kies elke link die niet is bezocht.
:not(selector) :not(p) Kies elk element dat geen <p>-element is.
:nth-child(n) p:nth-child(2) Kies elke <p>-element die de tweede kind is van zijn ouder.
:nth-last-child(n) p:nth-last-child(2) Kies elke <p>-element die de tweede kind is van zijn ouder, gerekend van het laatste kind.
:nth-last-of-type(n) p:nth-last-of-type(2) Select each <p> element that is the second child of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Select each <p> element that is the second <p> element of its parent.
:only-of-type p:only-of-type Select each <p> element that is the only <p> element of its parent.
:only-child p:only-child Select <p> elements that are the only child of their parent.
:optional input:optional Select <input> elements without the "required" attribute.
:out-of-range input:out-of-range Select <input> elements with values outside the specified range.
:read-only input:read-only Select <input> elements that have specified the "readonly" attribute.
:read-write input:read-write Select <input> elements without the "readonly" attribute.
:required input:required Select <input> elements that have specified the "required" attribute.
:root root Select the root element of an element.
:target #news:target Select the current active #news element (click on the URL containing the anchor name).
:valid input:valid Select all <input> elements with valid values.
:visited a:visited Select all visited links.