Pseudoklasa first-of-type

Pseudoklasa first-of-type wybiera element, który jest pierwszym potomkiem rodzica określonego typu. To znaczy, jeśli napiszesz h2:first-of-type - zostanie znaleziony pierwszy h2 w rodzicu (w przeciwieństwie do first-child, który znajdzie tylko ten h2, który stoi jako pierwszy w rodzicu).

Składnia

cssselektor:first-of-type {
  
}

Przykład

Znajdźmy akapit, który jest pierwszym akapitem w rodzicu:

html<div>
  <h2>nagłówek</h2>
  <p>akapit</p>
  
  <h2>nagłówek</h2>
  <p>akapit</p>
  
  <h2>nagłówek</h2>
  <p>akapit</p>
</div>

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

Результат: