[CSS] 수열 선택자 - 의사 클래스 :first-child / :last-child / :nth-child(n)

수열 선택자

:first-child {} - 같은 부모를 둔 자식들 중 첫 번째 위치한 자식

:last-child {} - 같은 부모를 둔 자식들 중 마지막에 위치한 자식

:nth-child(n) {} - 같은 부모를 둔 자식들 중 n 번째 위치한 자식

 

:first-of-type {} - 같은 부모를 둔 자식들 중 '같은 타입'의 첫 번째 자식

:last-of-type {} - 같은 부모를 둔 자식들 중 '같은 타입'의 마지막 자식

:nth-of-type(n) {} - 같은 부모를 둔 자식들 중 '같은 타입'의 n 번째 자식

 

(even) - 짝수

(odd) - 홀수

(3n+1) - 3개를 기준으로 첫 번째

(3n) - 3번째

---

<예제 코드>

  <div id="container" class="box">
    <p>01</p>
    <p>02</p>
    <p>03</p>
    <div>d4</div>
    <div>d5</div>
    <p>06</p>
    <p>07</p>
    <p>08</p>
    <p>09</p>
    <div>d10</div>
    <p>11</p>
    <div>d12</div>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <div>d19</div>
    <p>20</p>
    <p>21</p>
  </div>
  <div id="wrapper" class="box">
    <p>w01</p>
    <p>w02</p>
    <p>w03</p>
    <p>w04</p>
    <div>div5</div>
    <p>w06</p>
    <p>w07</p>
    <p>w08</p>
    <p>w09</p>
    <p>w10</p>
    <p>w11</p>
    <p>w12</p>
    <p>w13</p>
    <p>w14</p>
  </div>

<예제 이미지>

---

 

:first-child {} - 같은 부모를 둔 자식들 중 첫 번째 위치한 자식

:last-child {} - 같은 부모를 둔 자식들 중 마지막에 위치한 자식

:first-of-type {} - 같은 부모를 둔 자식들 중 '같은 타입'의 첫 번째 자식

:last-of-type {} - 같은 부모를 둔 자식들 중 '같은 타입'의 마지막 자식

.box p:first-child {
	background-color: lightsalmon;
}
/* .box 클래스의 자식인 p 중 첫번째 자식에만 적용 */

.container div:first-child {
	color: red;
}
/* #container의 자식들 중 처음 나오는 요소가 div라면 적용되지만 p이므로 적용 x */

#container div:first-of-type {
	color: gold;
}
/* #container의 자식들 중 div의 가장 첫 번째 자식에만 적용 */

.box div:last-of-type {
	background-color: lightseagreen;
}
/* .box의 자식들 div 중에 가장 마지막 자식에만 적용 */

 

first-child / last-child 는 해당 위치의 자식이 지정한 요소와 같아야만 적용된다.

즉, 첫 번째 자식이 p인데 div로 입력하거나, 마지막 자식이 div인데 p로 입력하면 적용되지 않음.

 

---

:nth-child(n) {} - 같은 부모를 둔 자식들 중 n 번째 위치한 자식

:nth-of-type(n) {} - 같은 부모를 둔 자식들 중 '같은 타입'의 n 번째 자식

    .box p:nth-child(7) {
      border: 3px solid #000;
    }
    /* .box의 자식들 중 7번째에 위치한 p에만 적용 */
    
    .box p:nth-child(10) {
      border: 3px double deeppink;
    }
    /* .box의 자식들 중 10번째에 위치한 p에만 적용.(div는 적용 x) */

---

:nth-child(even) {} - 같은 부모를 둔 자식들 중 짝수에 위치한 자식

:nth-child(odd) {} - 같은 부모를 둔 자식들 중 짝수에 위치한 자식

 

    #container p:nth-child(even) {
      background-color: chartreuse;
    }
/* #container의 자식들 중 짝수에 위치한 p에만 적용 */

    #wrapper p:nth-child(odd) {
      background-color: crimson;
    }
/* #wrapper의 자식들 중 홀수에 위치한 p에만 적용 */

---

:nth-child(3n+2) {} - 같은 부모를 둔 자식들 3명 기준으로 두 번째에 위치한 자식들

:nth-child(5n) {} - 같은 부모를 둔 자식들 5명 중 다섯 번째에 위치한 자식

    #container p:nth-child(3n+2) {
      border-radius: 0;
    }
    /* #container의 자식 p 3명을 기준으로 두 번째에 있는 p */
    
    #container p:nth-child(5n) {
      border: 3px solid deeppink;
    }
    /* #container의 자식 p 5명을 기준으로 5번째 p */
    
        #container p:nth-of-type(4n+1) {
      border-radius: 50% 0;
    }
    /*  #container의 자식 p들 중 4명을 기준으로 첫 번째 자식 */

---

    #wrapper :nth-child(n+3):nth-child(-n+11) {
      border: 3px dotted mediumspringgreen;
    }
    
 /* #wrapper의 3번째 자식부터 11번째 자식까지 적용 */
 
     #wrapper :nth-child(2n+5):nth-child(-n+11) {
      color: gold;
    }
    /* #wrapper의 자식 5번째부터 11번째까지 중 2개의 자식마다 첫 번째 자식에 적용 */