Pseudo-element selectors

CSS pseudo-element selectors kunnen worden gebruikt om bepaalde delen van een element op te maken zonder er ID's of classes aan toe te voegen. Het kan bijvoorbeeld worden gebruikt om de eerste letter of de eerste regel van de inhoud van een element te stijlen, of als je inhoud wilt toevoegen voor of na de inhoud van een element.

De opbouw is als volgt:

selector::pseudo-elementnaam { stijldeclaratie }

De naam van een pseudo-element selector is niet hoofdlettergevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters wordt geschreven.

::first-line Pseudo-element

De ::first-line pseudo-element past een speciale stijl toe, de eerste regel van een element wordt in een andere stijl weergegeven. De stijlregels in het volgende voorbeeld maken de eerste regel tekst in een alinea op. De lengte van de eerste regel hangt af van de grootte van het browservenster.

Voorbeeld:

p::first-line {
  color: green;
  font-weight: bold;
  font-variant: small-caps;
}

Uitproberen

De volgende eigenschappen zijn van toepassing op het ::first-line pseudo-element: font, color, background, word-spacing, letter-spacing, vertical-align, text-transform, line-height, text-decoration en clear.

Let op de dubbele dubbele punt ::first-line versus :first-line. In CSS3 werd de enkele dubbele punt vervangen door twee dubbele punten. Dit om onderscheid te maken tussen pseudo-classen en pseudo-elementen.

::first-letter Pseudo-element

De ::first-letter pseudo-element wordt gebruikt om een speciale stijl toe te voegen aan de eerste letter van een element, deze wordt dan in een andere stijl weergegeven. De stijlregels in het volgende voorbeeld worden gebruikt om de eerste letter van de tekst in alle p-elementen op te maken.

Voorbeeld:

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

Uitproberen

De volgende eigenschappen zijn van toepassing op het ::first-letter pseudo-element: font, color, background, margin, padding, border, float, vertical-align, text-transform, line-height, text-decoration en clear.

Het ::first-letter pseudo-element selector kan alleen worden toegepast op blokniveau elementen.

::before Pseudo-element

De ::before pseudo-element selector kan worden gebruikt om gegenereerde inhoud voor de inhoud van een element te plaatsen. Je kunt met behulp van deze pseudo-element gewone tekst of een ingesloten object, zoals afbeeldingen en andere bronnen, invoegen.

Voorbeeld:

p::before {
  content: url("images/clock.png");
}

Uitproberen

::after Pseudo-element

De ::after pseudo-element selector kan worden gebruikt om gegenereerde inhoud na de inhoud van een element te plaatsen. Je kunt met behulp van deze pseudo-element gewone tekst of een ingesloten object, zoals afbeeldingen en andere bronnen, invoegen.

Voorbeeld:

p::after {
  content: url("images/info.png");
}

Uitproberen

::marker Pseudo-element

De ::marker pseudo-element selector kan worden gebruikt om markeringen te selecteren van een lijst.

Voorbeeld:

::marker { 
  color: green;
  font-size: 25px;
}

Uitproberen

::selection Pseudo-element

De ::selection pseudo-element selector komt overeen met het gedeelte van een element dat door een gebruiker is geselecteerd. De volgende CSS-eigenschappen kunnen worden toegepast op ::selection: color, background, cursor en outline.

Voorbeeld:

::selection {
  color: white;
  background: green;
}

Uitproberen

Pseudo-elementen en CSS Classen

De pseudo-elementen kunnen worden gecombineerd met de CSS-classen.

Voorbeeld:

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

Uitproberen

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.