CSS3 Selector :nth-child(n+n)를 알아보자

CSS3 Selector :nth-child(n+n)를 알아보자

작업 중에 nth-child(n + 1) 이런 태그를 봤다.

셀렉터는 자주 쓰던 것만 써서 봤다가도 까먹고는 하는데, 이번엔 까먹지 말아야지.

:nth-child(1n+1);

배수로 선택하기

예시를 봐보자

HTML

<p class="box">box1</p>

<p class="box">box2</p>

<p class="box">box3</p>

<p class="box">box4</p>

<p class="box">box5</p>

<p class="box">box6</p>

<p class="box">box7</p>

<p class="box">box8</p>

<p class="box">box9</p>

<p class="box">box10</p>

<p class="box">box11</p>

<p class="box">box12</p>

<p class="box">box13</p>

<p class="box">box14</p>

CSS

p{ margin:0; padding:0; }

.box{

  width:100px;

  height:100px;

  float:left;

  border:1px solid #ccc;

  border-left:0;

  box-sizing:border;

  color:#ccc;

}

.box:first-child{

  border-left:1px solid #ccc;

}

.box:nth-child(7n+1){ background-color: red; clear:both; }

.box:nth-child(7n+2){ background-color: orange; }

.box:nth-child(7n+3){ background-color: yellow; }

.box:nth-child(7n+4){ background-color: green; }

.box:nth-child(7n+5){ background-color: blue; }

.box:nth-child(7n+6){ background-color: navy; }

.box:nth-child(7n+7){ background-color: purple; }

nth-child 를 알아보기 위함이니 nth-child 부분을 보면 nth-child(7n+1)이 있을 것이다.

7n + 1 = 7의 배수 + 1번째 선택

즉 1번 박스 부터 7번 박스 까지 빨주노초파남보 색상이 되고, 8번 박스 부터 14번 박스까지 다시 빨주노초파남보가 된다.

계속적으로 반복된다.

1~7번 빨~보

8~14번 빨~보

15~21번 빨~보

[예제]

See the Pen nth-child(n+n) example by leeyoonseo (@okayoon) on CodePen.