의사(가상) 클래스(:pseudo-class&element)

가상 클래스(pseudo-class)

:

HTML 문서의 일부를 DOM 트리 구조와는 상관없는 방법으로 선택할 때 사용된다.

:hover

:active

:link

:checked

:not()

:disabled,

:nth-of-type()

:is() | :where() - CSS4에서 포함된 가상 클래스로, 여러 선택된 요소를 보다 가독성을 높여서 스타일 선언을 할 수 있는 가상 클래스

• 중복되는 텍스트를 없앨 수 있다는 장점
• :is와 :where 의 차이점 → 동일하게 스타일 선언을 했을 때, :is가 우선순위가 더 높다.

  // :is
  button.focus, .button:focus{...}
  button:is(.focus, :focus){...}
  
  article > h1, article > h2, article > h3, article > h4, article > h5 {...}
  article:is(h1, h2, h3, h4, h5, h6){...}
  
  // :where
  article > h1, article > h2, article > h3, article > h4, article > h5 {...}
  article:where(h1, h2, h3, h4, h5, h6){...}

:has() - 부모 요소에 특정 자식이 있는지 여부에 따라 부모 요소의 스타일을 할 수 있다.

• 대부분 브라우저에서 지원되지 않음

  // 예) 버튼을 갖고 있는 입력 폼인데 버튼을 마우스 오버했을 때 스타일을 추가하려면?
  form:has(button:hover) {...}
  
  // 예) 목록 항목이 링크를 갖고 있다면?
  li:has(a){...}
  
  // 예) 이미지 주변에 링크의 모양을 바꾸려면?
  a:has(> img) {...}

---

가상 요소(pseudo-element)

::

문서에 나타난 것 이외에 추가로 정의된 DOM 트리의 추상화 레이어다.

::after

::before

::first-letter