Eerste tekst alinea aanpassen CSS :first-of-type

Met de :first-of-type selector in CSS kun je je de eerste weergave van een element aanpassen binnen een container. Handig in plaats van losse classes toevoegen.

Logo cursus traing wordpress

Eerste tekst alinea aanpassen CSS :first-of-type

first-of-type selector CSS

Met de :first-of-type kun je je richten op de eerste verschijning van een element binnen zijn container. Het is gedefinieerd in de CSS Selectors Level 3 spec als een “structurele pseudo-klasse”, wat betekent dat het wordt gebruikt om inhoud te stijlen op basis van zijn relatie met bovenliggende en onderliggende inhoud.

Stel dat we een artikel hebben met een en verschillende paragrafen:

A Title

tekstje

tekstje 2

tekstje 3

We willen de eerste groter maken, als een soort “koptekst” of inleidende paragraaf. In plaats van het een klasse te geven, kunnen we :first-of-type gebruiken om het te selecteren:

p:first-of-type {
font-size: 1.25em;
color: #dd0000;
}

Het gebruik van :first-of-type lijkt erg op :nth-child, maar met één belangrijk verschil: het is minder specifiek. Als we in het bovenstaande voorbeeld p:nth-child(1) hadden gebruikt, zou er niets gebeuren omdat de alinea niet het eerste kind van zijn ouder is. Dit toont de kracht van :first-of-type.
Het richt zich op een bepaald type element in een bepaalde rangschikking met betrekking tot vergelijkbare broers en zussen, niet op alle broers en zussen.

See the Pen CSS-Tricks: :first-of-type and :last-of-type by Zachary Kain (@zakkain) on CodePen.

last-of-type selector CSS

De :last-of-type selector maakt het mogelijk om het laatst voorkomende element in zijn container te selecteren. Het is gedefinieerd in de CSS Selectors Level 3 spec als een “structurele pseudo-klasse”, wat betekent dat het wordt gebruikt om inhoud te stijlen op basis van zijn relatie met de bovenliggende en verwante inhoud.

how-can-i-select-the-last-element-with-a-specific-class-not-last-child-inside-o

Last child

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Handleidingen eerste tekst groter maken:
developer.mozilla.org/en-US/docs/Web/CSS/:last-child
https://css-tricks.com/a-call-for-nth-everything

Nog een voorbeeld van een pseudoclass

.jouwstijl:before {
  color: red;
  content: "Tekst voor class";
}

stackoverflow.com/questions/25561450/color-the-first-word-of-sentence-css


Meer informatie over Eerste tekst alinea aanpassen CSS :first-of-typeof info?

Wil je meer weten? Veel web-designers met interesse in Eerste tekst alinea aanpassen CSS :first-of-type bekeken ook de onderstaande veel gelezen handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je website beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Eerste tekst alinea aanpassen CSS :first-of-type?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Eerste tekst alinea aanpassen CSS :first-of-type en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven