Как скрыть div ы начиная с третьего

Question

Как скрыть div ы начиная с третьего т.е. есть 10 div и начиная с 3 нужно их скрыть?

Answer 1

for (i = 0; i < 10; i++) {
  div = document.createElement('div');
  div.innerHTML = i + 1;
  root.appendChild(div);
}

#root > div:nth-child(n+3) {
  display: none;
}

<div id="root"></div>

Answer 2

Просто css.

так:

div {
  display: none;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
}

div:nth-child(1),
div:nth-child(2) {
  display: inline-block;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

или так:

div {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
}

div:nth-child(n+3) {
  display: none;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

ну или так:

div {
  display: none;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
}

div:nth-child(-n+2) {
  display: inline-block;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>