패턴의 힘: nth-child 사용하기

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 15번째.

:nth-child() 의사 클래스는 숫자나 패턴을 사용하여 부모 요소 내의 순서에 따라 요소를 선택합니다.

예를 들어, 다음과 같은 리스트가 있습니다:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

다음은 짝수 번째 리스트 항목을 선택하는 방법입니다:

li:nth-child(even) {
  background-color: lightblue;
}

다음은 3번째 항목을 선택하는 방법입니다:

li:nth-child(3) {
  font-weight: bold;
}

매 5번째 항목을 선택하는 방법은 다음과 같습니다:

li:nth-child(5n) {
  color: red;
}

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

:nth-child()를 사용하여 매 세 번째 <div>에 노란색 배경을 적용하는 CSS 규칙을 만드세요.

치트 시트

:nth-child() 의사 클래스는 부모 요소 내에서의 순서를 기준으로 요소를 선택합니다.

짝수 번째 요소 선택:

li:nth-child(even) {
  background-color: lightblue;
}

특정 요소 선택 (3번째):

li:nth-child(3) {
  font-weight: bold;
}

매 n번째 요소 선택 (매 5번째):

li:nth-child(5n) {
  color: red;
}

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <title>Pattern Power: Using nth-child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>
</body>
</html>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.