first-of-type selector CSS

Met de :first-of-type selector in CSS 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 titel en verschillende paragrafen:

<article> 
<h3>A Title</h3> 
<p>tekstje</p> 
<p>tekstje 2</p> 
<p>tekstje 3</p> 
<img src="cursuswp.com/handleiding"> 
</article>

We willen de eerste paragraaf 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