CSS nth child psuedo-selector

I had been familiar with the nth-child pseudo-selector for some time, but I apparently haven’t been using it to its fullest extent.

Today I had an issue where I wanted the first three images in an element to have a certain height, and the rest to have a different height. Since I knew the first three would always be the same, I decided to target them instead of the rest of the images.

Here’s roughly how I managed to do this.

.yourelement .img-wrapper img {
  height: 300px;
}

.yourelement .img-wrapper:nth-child(-n+3) img {
  height: 200px;
}

}

CSS-Tricks has a great tool for testing variations of the nth-child pseudo-selector.