#todayilearned

by @jm3 · aka John Manoogian3

Frequent, bite-size mini-milestone updates as I fast-forward merge* my front-end web development skills up to 2019 levels. Learn more

The :first-of-type CSS element selector

Posted at — Jun 18, 2019

What’s a little unintuitive to me is that :first-of-type doesn’t necessarily select one element, as the name might suggest! first-of-type selects ALL first of (element) type.

A selector like header .fizzgig > ul li:first-of-type would select all first <li>s inside a <header> that are direct descendents of an element with class fizzgig.

path:first-of-type {
  fill: black;
}

Click “Result” to see how :first-of-type selects ALL first of type, not “THE” first of type.