The first few

This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Yesterday I changed the layout of the homepage of this blog. The reason why is explained in this post called This site goes to eleven. On bigger resolutions, the first two or three posts are styled differently. Selecting the first post of a series is easy with CSS. You just use the :first-of-type pseudo-selector and you’re done. But how do you select the first two, or the first three items of a list with one single selector?

That’s pretty easy too. To select the first two items, you use :nth-of-type(-n + 2), and to select the first three items, you use :nth-of-type(-n + 3). I will not explain how this works, you should play with the numbers yourself — or read this excellent explanation by Chris Coyier. It is extremely powerful. I love pseudo-selectors and so should you.