Selectors

  • account_tree
  • bug_report

Tree-Structural Pseudo-classes

단순한 선택자나 선택자 조합으로 표현할 수 없는 구조적인 추가 정보를 기반으로 요소를 선택할 수 있도록 한다. DOM 트리 내의 요소에만 적용되며 CSS에 의한 가상 요소는 대상이 아니다.

관련 선택자 유형

  • :empty

    자식 요소(텍스트, 공백 포함)가 존재하지 않는 경우에 선택자로 사용된다.
  • :first-child

    같은 레벨(형제) 요소 그룹 중에서 첫 번째 요소를 선택자로 사용한다.
  • :first-of-type

    같은 레벨(형제) 관계 요소 그룹 중에서 선택자와 동일한 타입의 첫 번째 요소를 선택자로 사용한다.
  • :last-child

    같은 레벨(형제) 요소 그룹 중에서 마지막 요소를 선택자로 사용한다.
  • :last-of-type

    같은 레벨(형제) 관계 요소 그룹 중에서 선택자와 동일한 유형의 마지막 요소를 선택자로 사용한다.
  • :nth-child()

    같은 레벨(형제) 관계의 요소 그룹에서 인수로 지정한  순서에  해당하는 요소를 선택자로 사용한다.
  • :nth-last-child()

    같은 레벨(형제) 요소 그룹 중에서 뒤에서 부터 인수로 지정된 위치 값으로 요소를 선택자로 사용한다.
  • :nth-last-of-type()

    같은 레벨(형제) 요소 그룹 내에서 선택자와 동일한 타입을 기준으로 뒤에서 부터의 위치 값을 인수로 지정해 해당되는 요소를 선택자로 사용한다.
  • :nth-of-type()

    같은 레벨(형제) 요소 그룹 (단위)내에서 선택자와 동일한 타입을 갖는 대상중에 인수로 지정된 위치(순서) 값을 갖는 요소를 선택자로 사용한다.
  • :only-child

    동등 레벨(형제)이 없는 단일 요소를 선택자로 사용한다.
  • :only-of-type

    선택자와 동일한 타입으로서 동등 레벨(형제)이 없는 단일 요소인 경우에만 선택자로 사용된다.
  • :root

    웹 문서의 최상위 요소를 선택자로 사용한다.

W3C Modules

Selectors Level 4 - Tree-Structural pseudo-classes
W3C Working Draft, 11 November 2022