Pseudotřída first-of-type

Pseudotřída first-of-type vybírá prvek, který je prvním potomkem rodiče zadaného typu. To znamená, že pokud napíšete h2:first-of-type - najde se první h2 v rodiči (na rozdíl od first-child, který najde pouze ten h2, který je úplně první v rodiči).

Syntaxe

cssselektor:first-of-type {
  
}

Příklad

Najděme odstavec, který je prvním odstavcem v rodiči:

html<div>
  <h2>nadpis</h2>
  <p>odstavec</p>
  
  <h2>nadpis</h2>
  <p>odstavec</p>
  
  <h2>nadpis</h2>
  <p>odstavec</p>
</div>

cssp:first-of-type {
  color: red;
}

Результат: