Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to select only first three elements with CSS

How can I select only first three elements with the :nth-child() selector?

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>
like image 247
Bariq Dharmawan Avatar asked May 18 '18 08:05

Bariq Dharmawan


1 Answers

You can do it like this:

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>
like image 117
VXp Avatar answered Sep 22 '22 07:09

VXp