더북(TheBook)

:nth-child(n)과 :nth-last-child(n)

:nth-child(n) 선택자는 E 요소가 부모의 모든 자식 요소 중 n번째 자식 요소가 맞으면 선택합니다. 만약 다음과 같이 선택자를 작성하면 부모 요소의 첫 번째 자식 요소가 p 태그일 때 선택합니다.

05/04/nth-child.html

  <style>
    p:nth-child(){
      color:red;
    }
  </style>
</head>
<body>
  <p>lorem 0</p> /* 부모인 body 태그의 첫 번째 자식 요소가 p 태그이므로 스타일 적용 */
  <div>
    <p>lorem 1</p> /* 부모인 div 태그의 첫 번째 자식 요소가 p 태그이므로 스타일 적용 */
    <p>lorem 2</p>
  </div>
  <div>
    <p>lorem 3</p> /* 부모인 div 태그의 첫 번째 자식 요소가 p 태그이므로 스타일 적용 */
    <p>lorem 4</p>
  </div>
</body>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.