JSFiddle - React, Tailwind, and code Playground

by KhuyenNH

HTML

<main>
  <ul class="albums">
    <li class="sale">
      <img src="https://placehold.co/150/5887C4/fff?text=MayFest" />
    </li>
    <li class="highlight">
      <img src="https://placehold.co/150/orange/fff?text=nth-child(2)" />
    </li>
    <li>
      <img src="https://placehold.co/150/240147/fff?text=MayFest" />
    </li>
    <li>
      <img src="https://placehold.co/150/31ca83/fff?text=MayFest" />
    </li>
    <li class="highlight">
      <img src="https://placehold.co/150/brown/fff?text=hightlight+2" />
    </li>
    <li class="sale">
      <img src="https://placehold.co/150/31ca83/fff?text=MayFest" />
    </li>
  </ul>
</main>

CSS

* {
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}

.highlight:nth-child(2) {
  /* = Select the element with the class .highlight that is also the 2nd child */
  outline: 5px solid orange;
  outline-offset: 5px;
}

:nth-child(2 of .highlight) {
  /* = Select the 2nd child element that has the class .highlight applied to it */
  outline: 5px solid brown;
  outline-offset: 5px;
}

main {
  max-width: 600px;
  margin: 100px auto;
}

.albums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 60px 30px;
}

.albums li {
  display: flex;
  justify-content: center;
  padding: 10px;
}