Как выбрать только первые три элемента с помощью CSS

#css

#HTML #css #css-селекторы

Вопрос:

Как я могу выбрать только первые три элемента с помощью :nth-child() селектора?

 section > figure:nth-child( ? ) {
  /* ... */
}  
 <section>
  <figure>1</figure> <!-- select this -->
  <figure>2</figure> <!-- and this -->
  <figure>3</figure> <!-- and this -->
  <figure>4</figure>
  <figure>5</figure>
  <figure>6</figure>
</section>  

Комментарии:

1. css-tricks.com/useful-nth-child-recipies

Ответ №1:

Вы можете сделать это следующим образом:

 section > figure:nth-child(-n 3) {background: Aqua}  
 <section>
  <figure>1</figure>
  <figure>2</figure>
  <figure>3</figure>
  <figure>4</figure>
  <figure>5</figure>
  <figure>6</figure>
</section>