Selectors

  • account_tree
  • bug_report

Pseudo-elements

문서 언어에 의해 명시적으로 생성된 요소 이외의 추상 요소를 나타낸다. 문서 트리에 맞추도록 제한되지 않으므로 문서의 트리 구조에 매핑되지 않는 문서 부분을 선택하고 스타일을 지정하는 데 사용할 수 있다.

관련 선택자 유형

  • ::after

    선택자를 갖는 요소 내 콘텐츠 뒤쪽에 가상 요소를 만들어 선택자로 사용한다.
  • ::backdrop

    HTMLDialogElement를 이용해서 모달(modal) 대화 창을 생성할 때 대화 상자 뒤쪽에 가상 요소를 생성해 대화 상자외부의 콘텐츠와 분리할 수 있다.
  • ::before

    선택자를 갖는 요소 내 콘텐츠 앞쪽에 가상 요소를 만들어 선택자로 사용한다.
  • ::file-selector-button

    유저 에이전트가 input 요소의 type 애트리뷰트가 file인 요소를 렌더링 하는 경우를 나타낸다.
  • ::first-letter

    선택자를 갖는 요소 내의 첫 번째 행의 첫 글자를 가상 요소로 사용한다.
  • ::first-line

    선택자를 갖는 요소 내의 첫 번째 행을 가상의 요소로 사용한다.
  • ::marker

    목록 항목의 자동 생성 마커를 나타낸다.
  • ::part()

    일치하는 part 속성이 있는 Shadow Tree 내의 모든 요소를 가상요소 선택자로 사용한다.
  • ::placeholder

    input, textareaplaceholder  속성으로 지정된 텍스트를 가상 요소로 사용한다.
  • ::selection

    선택자를 갖는 요소 내의 텍스트를 드래그하여 블럭으로 잡는 경우에 선택자로 사용이 된다.

W3C Modules

CSS Pseudo-Elements Module Level 4
W3C Working Draft, 30 December 2022