> The main issue is that it makes the component harder to reproduce without using the template.

When I was working with list items, I spent way more time learning and then forgetting what CSS rules like `.oae-thumbnail:first-child` and `> div:not(.oae-thumbnail)` were trying to say than I did adding an extra div to the template. I'd rather not start sliding back into that pattern, it is a misuse of pseudo-classes.

Pseudo-classes work well when used precisely for what they mean:

* `li:first-child`, e.g., "The first item in the list shouldn't have top margin",  this is good because it being the first/top item in the list is specifically why you need to remove the top margin
* `div:nth-child(odd)`, e.g., "Every other row should have a shaded background", again this is proper use because we are actually trying to refer to alternating rows in a data table, odd rows don't have semantic difference over even ones
* The example for the `nth-of-type` selector in that MDN article is a good use-case for that selector

In the case of this thumbnail, we're not referencing something that is described by the fact that it is the "1st thumbnail child of the list item", the thumbnail has a distinct semantic meaning in the listitem component: the thumbnail that depicts the primary focal point of the list item, such as the entity the list item represents.

> `primary-thumbnail` also implies that there can be other thumbnails, which we don't really refer to...

Using `nth-of-type` also implies that there should be more thumbnails. Also, in the notes of the component we do say that you can put other thumbnail components in the list item. Maybe we just need to describe what `primary-thumbnail` means a bit better?