CSS N 번째 자식:전체 가이드

CSS :nth-child() 선택기는 그룹의 특정 위치에 있는 요소에 스타일을 적용합니다. 종종 :nth-child() 선택기는 두 번째 또는 세 번째 항목과 같은 특정 목록 항목의 스타일을 지정하는 데 사용됩니다.

웹 사이트를 디자인할 때 컨테이너의 선택된 요소 집합에만 스타일을 적용할 수 있습니다. 예를 들어 목록의 모든 두 번째 요소 또는 표의 모든 세 번째 행에만 스타일을 적용할 수 있습니다.

바로 여기에서 CSS :nth-child 의사 클래스가 사용됩니다. :nth-child 의사 클래스는 HTML 페이지의 항목 목록에서 위치에 따라 요소를 찾습니다.

이 튜토리얼에서는 예제를 참조하여 의사 클래스의 기본 사항과 :nth-child 의사 클래스를 사용하는 방법에 대해 설명합니다. 이 튜토리얼을 다 읽고 나면 :nth-child 의사 클래스를 사용하여 웹 페이지의 요소를 선택하는 데 전문가가 될 것입니다.

CSS 의사 클래스

CSS에서 선택기는 스타일을 적용해야 하는 웹 페이지의 특정 요소를 선택하는 데 사용됩니다. 예를 들어, 선택기는 웹 페이지의 모든

요소의 텍스트 색상을 녹색으로 변경할 수 있습니다.

특정 상태에 있는 요소에만 스타일을 적용하기로 결정할 수 있습니다. 의사 클래스를 사용하면 요소가 특정 상태에 있을 때만 스타일을 적용할 수 있습니다.

CSS :n번째 자식 의사 클래스

:nth-child 의사 클래스는 그룹의 요소에 스타일을 적용합니다. 위치 또는 여러 요소를 기반으로 특정 요소에 스타일을 적용할 수 있습니다. 일반적인 :nth-child 규칙은 목록의 홀수 또는 짝수 위치에 있는 모든 요소에 색상을 지정하는 것입니다.

다음은 :nth-child 의사 클래스의 구문입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

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

이 예를 분석해 보겠습니다.

리 스타일을 적용해야 하는 요소를 나타냅니다.
n번째 자녀 요소를 일치시키는 데 사용되는 선택기입니다.
2 nth-child를 사용하여 요소를 일치시키는 데 사용되는 공식입니다.

이 경우 목록의 모든 두 번째

요소에 스타일을 적용했습니다.

:n번째 자식 허용 값

:nth-child 의사 클래스는 두 가지 유형의 값을 허용합니다. 첫째, 의사 클래스는 기본 공식이 할당된 키워드 값을 허용합니다. 이러한 키워드는 다음과 같습니다.

홀수:목록에서 위치가 홀수인 요소를 선택합니다.
짝수:목록에서 위치가 짝수인 요소를 선택합니다.

둘째, :nth-child 의사 클래스는 웹 페이지에서 의사 클래스가 선택해야 하는 요소를 지정하는 사용자 정의 공식을 허용합니다. 다음은 몇 가지 수식의 예입니다.

:nth-child(6):목록에서 여섯 번째 요소를 선택합니다.
:nth-child(n+2):두 번째 요소와 모든 후속 요소를 선택합니다.
:nth-child(4n):4의 배수인 모든 요소를 선택합니다.

n 목록에서 항목이 나타나는 위치와 같습니다.

이제 우리는 :nth-child 의사 클래스의 기본 사항을 알았고 실제로 작동하는 의사 클래스의 몇 가지 예를 탐색할 수 있습니다.

CSS :nth-child 예제

:nth-child 의사 클래스의 두 가지 예를 살펴보겠습니다.

:n번째 자식 테이블

:nth-child 의사 클래스의 일반적인 용도 중 하나는 테이블에서 행을 선택하는 것입니다.

지역 요리 클럽의 웹사이트를 디자인한다고 가정해 보겠습니다. 클럽은 우리에게 특별한 매운 핫 초콜릿 레시피가 있는 웹사이트 표를 만들 것을 요청했습니다. . 클럽은 테이블의 모든 두 번째 행이 클럽의 주요 색상인 핫 핑크로 강조 표시되기를 원합니다.

다음 코드를 사용하여 이 테이블을 만들 수 있습니다.

<html>

<table>
  <tr>
    <th>Ingredient</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Skimmed Milk</td>
    <td>250 mls</td>
  </tr>
  <tr>
    <td>75% Dark Chocolate</td>
    <td>Two squares (10g)</td>
  </tr>
  <tr>
    <td>Cinnamon</td>
    <td>A pinch</td>
  </tr>
  <tr>
    <td>Honey</td>
    <td>1 tsp</td>
  </tr>
</table>

<style>
  tr:nth-child(even) {
      background-color: hotpink;
  }
</style>

CSS N 번째 자식:전체 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

2개의 열과 5개의 행(그 중 하나는 헤더 행)이 있는 테이블을 정의했습니다. 첫 번째 열은 매운 핫 초콜릿을 만드는 데 사용되는 재료 목록을 저장합니다. 두 번째 열은 사용된 각 재료의 양을 저장합니다.

HTML에서 표를 만드는 방법에 대해 자세히 알아보려면 HTML 표에 대한 가이드를 읽어보세요.

CSS 파일에서 :nth-child 의사 클래스를 사용하여 테이블의 모든 짝수 행에 스타일을 적용했습니다.

tr selector는 모든 테이블 행(HTML에서 태그로 표시됨)을 선택하는 데 사용되며 :nth-child(even) 의사 클래스는 ID 번호가 짝수인 모든 테이블 행을 선택합니다. 짝수 테이블 행마다 테이블 행의 배경색이 핫핑크로 설정됩니다.

:n번째 자식 목록

:nth-child 의사 클래스의 또 다른 일반적인 용도는 목록의 항목을 강조 표시하는 것입니다.

요리 클럽의 각 회원의 이름 목록을 작성하라는 요청을 받았다고 가정해 보겠습니다. 목록에 있는 처음 세 이름의 텍스트는 클럽에서 타이틀을 보유하고 있기 때문에 밝은 파란색으로 표시되어야 합니다.

다음 코드를 사용하여 이 목록을 만들 수 있습니다.

<html>

<ul>
	<li>Chad Bakersfield</li>
	<li>Laura Patel</li>
	<li>Eddie Mahoney</li>
	<li>Edna Jamieson</li>
	<li>Lesley Spencer</li>
	<li>James Moffat</li>
	<li>Olivia Lindsay</li>
<ul>

<style>
  li:nth-child(-n+3) {
      color: lightblue;
  }
</style>