CSS 페인트 클래스 참조 매뉴얼

CSS pseudo-class

pseudo-class은 요소의 특수 상태를 정의합니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

  • 사용자가 요소 위에 마우스를 올릴 때 스타일을 설정합니다.
  • 방문한/미 방문한 링크에 다른 스타일을 설정합니다.
  • 요소가 포커스를 얻을 때 스타일을 설정합니다.
  • 유효/미 유효/필수/선택 필수의 형식 요소에 스타일을 설정합니다.

다음 표는 CSS에서 다양한 pseudo-class을 보여줍니다:

pseudo-class 예제 예제 설명
:active a:active 활성 링크를 선택합니다.
:any-link a:anylink href 속성을 가진 모든 <a> 또는 <area> 요소를 선택합니다.
:auto-fill input:autofill 브라우저가 자동으로 채운 값으로 가진 모든 <input> 요소를 선택합니다.
:checked option:checked 모든 선택된 <input> 또는 <option> 요소를 일치시킵니다.
:default input:default 관련 요소 집합에서 기본 형식 요소를 선택합니다.
:defined :defined 모든 정의된 요소(표준 또는 사용자 정의 요소)를 선택합니다.
:dir() :dir(rtl) 지정된 텍스트 방향을 가진 요소를 선택합니다.
:disabled option:disabled 모든 비활성화된 요소를 선택합니다. 종종 형식 요소에 사용됩니다.
:empty div:empty 선택할 모든 요소(텍스트 노드 포함)
:enabled input:enabled 모든 활성 요소를 선택(보통 표单 요소에 사용).
:first @page :first 인쇄 문서의 첫 번째 페이지를 나타냅니다. (@page 규칙과 함께 사용).
:first-child p:first-child 형제 요소 중 첫 번째 자식 요소로 선택된 요소.
:first-of-type li:first-of-type 형제 요소 중 첫 번째 특정 유형의 요소를 선택.
:focus select:focus 포커스를 받은 요소를 선택(보통 표单 요소에 사용).
:focus-visible button:focus-visible 키보드를 통해 포커스를 받은 요소를 선택(마우스를 통해 포커스를 받을 때 적용되는 포커스 스타일만 적용).
:focus-within form:focus-within 요소나 그 자식 요소 중 어느 하나라도 포커스를 받은 요소를 매칭.
:fullscreen :fullscreen 전체 화면 모드에 있는 요소를 선택.
:has() h2:has(+p) <p> 요소 뒤에 오는 <h2> 요소를 선택하고 <h2>에 스타일을 적용.
:hover a:hover 마우스를 올린 요소를 선택.
:in-range input:in-range 지정된 범위 내의 값을 가진 <input> 요소를 선택.
:indeterminate input:indeterminate 불확실한 상태에 있는 표单 요소를 선택.
:invalid input:invalid 잘못된 표单 요소를 선택.
:is() :is(ul, ol) 모든 <ul>과 <ol> 요소를 선택하세요。
:lang() p:lang(it) lang 속성이 "it"(이탈리아어)인 <p> 요소를 선택.
:last-child li:last-child 부모 요소의 마지막 자식 요소로 선택된 <li> 요소.
:last-of-type p:last-of-type 부모 요소의 마지막 <p> 요소로 선택된 <p> 요소.
:left @page :left 인쇄 문서의 모든 왼쪽 페이지를 나타냅니다. (@page 규칙과 함께 사용).
:link a:link 모든 미방문 링크를 선택.
:modal :modal 모달 상태에 있는 요소를 선택.
:not() :not(p) 모든 <p> 요소가 아닌 요소를 선택.
:nth-child() p:nth-child(2) 부모 요소의 두 번째 자식 요소로 선택된 <p> 요소.
:nth-last-child() p:nth-last-child(2) 부모 요소의 마지막 두 번째 자식 요소로서 선택된 <p> 요소를 선택합니다.
:nth-last-of-type() p:nth-last-of-type(2) 부모 요소의 마지막 두 번째 <p> 요소로서 선택된 <p> 요소를 선택합니다.
:nth-of-type() p:nth-of-type(2) 부모 요소의 두 번째 <p> 요소로서 선택된 <p> 요소를 선택합니다.
:only-child p:only-child 부모 요소의 유일한 자식 요소로서 선택된 <p> 요소를 선택합니다.
:only-of-type p:only-of-type 부모 요소의 유일한 <p> 요소로서 선택된 <p> 요소를 선택합니다.
:optional textarea:optional required 속성을 가지지 않는 <input>、<select> 또는 <textarea> 요소를 선택합니다.
:out-of-range input:out-of-range 지정된 범위를 초과하는 값을 가진 <input> 요소를 선택합니다.
:placeholder-shown input:placeholder-shown 현재占位符 텍스트를 표시하는 <input> 또는 <textarea> 요소를 선택합니다.
:popover-open :popover-open 弹出状态中表示的元素를 선택합니다.
:read-only input:read-only readonly 속성을 가진 입력 요소를 선택합니다.
:read-write input:read-write 수정 가능한 입력 요소를 선택합니다.
:required input:required required 속성을 가진 입력 요소를 선택합니다.
:right @page :right 출력 문서의 모든 오른쪽 페이지를 나타냅니다. (@page 규칙과 함께 사용).
:root :root 문서의 루트 요소를 선택합니다.
:scope :scope 선택자 매칭 참조점이나 범위를 가진 요소를 선택합니다.
:state() :state() 지정된 사용자 정의 상태를 가진 사용자 정의 요소를 선택합니다.
:target :target 현재 활성 상태의 타겟 요소를 선택합니다.
:user-invalid :user-invalid 사용자와 상호작용한 후 무효 값을 가진 폼 요소를 선택합니다.
:user-valid :user-valid 사용자와 상호작용한 후 유�효 값을 가진 폼 요소를 선택합니다.
:valid input:valid 유�효 값을 가진 입력 요소를 모두 선택합니다.
:visited a:visited 모든 방문한 링크를 선택하세요。
:where() :where(ol, ul) 모든 <ul>과 <ol> 요소를 선택하세요。