CSS 가상선택자 적용 순서

일년전쯤 배우긴 했지만 그리 깊게 배우진 않았어서, 이번에 실제 작업하며 약간 헷갈렸던 CSS와 관련된 내용을 기록해본다. 당시 공부하며 학습내용을 정리했던 글도 링크로 첨부한다.

https://hjinn0813.tistory.com/12

[코딩온] 프론트엔드 입문 Day 17 (CSS 문법, 선택자)

---

CSS 가상선택자의 종류

Pseudo-classes

'상태'를 의미히며, 콜론 1개를 사용한다. 실제 HTML 요소에만 적용이 가능하다.

:hover /* 요소에 마우스를 올릴 때 */
:focus /* 요소에 포커스가 있을 때 */
:checked /* 요소가 체크된 상태 (checkbox, radio) */
:active /* 요소가 클릭됐을 때 */
:nth-child() /* 부모에서 특정 순번 자식을 선택 */
:not() /* 특정 요소 제외할 때 */

Pseudo-elements

'구조적 부분'을 의미하며, 콜론 2개를 사용한다. 실제 HTML 요소의 앞/뒤에 생기는 가상의 요소이다.

::before /* 요소 내용의 앞에 가상 요소 생성 */
::after /* 요소 내용의 뒤에 가상 요소 생성 */
::placeholder /* 입력 필드의 플레이스홀더 스타일링 */
::selection /* 선택된 텍스트 스타일링 */

가상선택자 콜론 1개와 2개의 차이와 문법

• 콜론 1개 선택자에 2개를 쓰는 경우?
  :hover 같은 pseudo-class에 ::hover처럼 쓰면 효과가 적용되지 않는다.
  pseudo-class와 pseudo-element가 HTML/CSS에서 명확히 구분되기 때문이다.
• 콜론 2개 선택자에 1개를 쓰는 경우?
  ::before를 :before처럼 쓰면 옛날 브라우저에서는 동작하지만, 최신 표준에서는 권장하지 않는다.
  호환성 문제를 피하려면 최신 CSS에서는 pseudo-element는 ::를 써야 명확히 인식된다.

실제로 적용할 때, 순서는 콜론 1개짜리가 우선, 콜론 2개짜리를 나중에 작성한다.

CSS 선택자는 대상 → 상태 → 구조 순서로 작성하기 때문이다.

예를 들어
a:active::before

a → "누구에게 적용할지" 위치나 대상 (요소 자체)
:active → "언제 적용할지" 상태 (클릭된 상태)
::before → "어디에 적용할지" 구조 (추가된 가상의 콘텐츠)