구조적 가상 클래스

3.1 가상 클래스 :first-child

CSS에서 구조적 가상 클래스는 문서 트리에서의 위치에 따라 요소를 선택하고 스타일링할 수 있게 해줘. 특정 요소에 적용되는 더욱 정확하고 세부적인 스타일을 만드는 데 특히 유용해. :first-child, :last-child, :nth-child 및 :nth-of-type 가상 클래스를 살펴보자.

:first-child 가상 클래스는 부모의 첫 번째 자식 요소를 선택해. 이건 같은 유형의 요소 그룹, 예를 들어 리스트나 문단의 첫 번째 요소를 스타일링하는 데 유용해.

문법:

    
      선택자:first-child {
        속성: 값;
      }
    
  

사용 예시

이 예제에서는 리스트의 첫 번째 요소가 볼드체와 빨간색으로 강조되며, div안의 첫 번째 문단이 대문자로 변환돼:

    
      /* 리스트의 첫 번째 요소 스타일링 */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* div 안의 첫 번째 문단 스타일링 */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

3.2 가상 클래스 :last-child

:last-child 가상 클래스는 부모의 마지막 자식 요소를 선택해. 이건 같은 유형의 요소 그룹의 마지막 요소를 스타일링하는 데 사용해.

문법:

    
      선택자:last-child {
        속성: 값;
      }
    
  

사용 예시

이 예제에서는 리스트의 마지막 요소가 이탤릭체와 파란색으로 강조되며, div 안의 마지막 문단이 밑줄이 그어져:

    
      /* 리스트의 마지막 요소 스타일링 */

      li:last-child {
        font-style: italic;
        color: blue;
      }

      /* div 안의 마지막 문단 스타일링 */

      div p:last-child {
        text-decoration: underline;
      }
    
  

3.3 가상 클래스 :nth-child

:nth-child 가상 클래스는 그룹 내에서 위치에 따라 요소를 선택할 수 있게 해줘. 이건 어떤 요소들이 선택될 것인지를 결정하는 인자를 받아. 그 인자는 숫자, 키워드, 또는 표현식이 될 수 있어.

문법:

    
      선택자nth-child(인자) {
        속성: 값;
      }
    
  

인자:

• 숫자: 지정된 위치의 요소를 선택
• 키워드: odd (홀수) 및 even (짝수)
• 표현식: an+b 형식, 여기서 a와 b는 숫자

예제 1: 홀수 요소 선택

이 예제에서는 홀수 리스트 요소가 스타일링되어 연한 회색 배경을 가져:

    
      /* 리스트의 홀수 요소 스타일링 */

      li:nth-child(odd) {
        background-color: #f0f0f0;
      }
    
  

예제 2: 특정 위치의 요소 선택

이 예제에서는 리스트의 세 번째 요소가 볼드체와 초록색으로 강조돼:

    
      /* 리스트의 세 번째 요소 스타일링 */

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

예제 3: 표현식 사용

이 예제에서는 첫 번째부터 시작해 매 두 번째 요소가 스타일링되어 연한 회색 배경을 가져:

    
      /* 첫 번째부터 시작해 매 두 번째 요소 스타일링 */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 가상 클래스 :nth-of-type

:nth-of-type 가상 클래스는 :nth-child와 비슷하지만, 부모의 자식 요소 중에서 그 타입에 따라 요소를 선택해. 이는 자기 부모의 첫 번째 자식이 아니더라도 특정 타입의 요소를 선택할 수 있게 해줘.

문법:

    
      선택자:nth-of-type(인자) {
        속성: 값;
      }
    
  

인자:

• 숫자: 같은 타입의 요소 중 지정된 위치의 요소를 선택
• 키워드: odd (홀수) 및 even (짝수)
• 표현식: an+b 형식, 여기서 a와 b는 숫자

예제 1: 짝수 문단 선택

이 예제에서는 모든 짝수 문단이 스타일링되어 연한 회색 배경을 가져:

    
      /* 짝수 문단 스타일링 */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

예제 2: 같은 타입 중 특정 위치의 요소 선택

이 예제에서는 두 번째 h2 제목이 크기가 커지고 주황색으로 색칠돼:

    
      /* 두 번째 h2 제목 스타일링 */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

예제 3: 표현식 사용

이 예제에서는 두 번째부터 시작해 매 세 번째 리스트 요소가 스타일링되어 연한 회색 배경을 가져:

    
      /* 두 번째부터 시작해 매 세 번째 리스트 요소 스타일링 */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }