CSS - 가상클래스
◆ CSS 가상 클래스(Pseudo-class)란?
CSS에서 가상 클래스(Pseudo-class)는 HTML 요소의 특정 상태(State)나 조건에 따라 스타일을 적용하기 위한 선택자입니다.
쉽게 말하면 HTML에 클래스를 추가하지 않아도 특정 상황의 요소를 선택할 수 있는 기능입니다.
가상 클래스는 콜론(:) 을 사용합니다.
선택자:가상클래스 {
속성: 값;
}
◆ CSS 가상 요소(Pseudo-element)란?
가상 요소는 존재하지 않는 새로운 요소를 생성하거나 요소의 일부를 선택합니다.
| 구분 | 기호 | 설명 |
|---|---|---|
| 가상 클래스 | : |
상태 또는 조건 선택 |
| 가상 요소 | :: |
새로운 요소 생성 또는 일부 선택 |
◆ CSS 가상 클래스 종류
상태(State) 관련
| 가상 클래스 | 설명 | 예시 |
|---|---|---|
:hover |
마우스를 올렸을 때 | button:hover |
:active |
클릭하고 있는 동안 | button:active |
:focus |
포커스를 가진 요소 | input:focus |
:focus-visible |
키보드 포커스가 보일 때 | button:focus-visible |
:focus-within |
자식 요소 중 포커스를 가진 요소가 있을 때 | form:focus-within |
:checked |
체크된 체크박스/라디오 | input:checked |
:disabled |
비활성화된 요소 | button:disabled |
:enabled |
활성화된 요소 | button:enabled |
:target |
현재 URL의 앵커 대상 | section:target |
위치(Position) 관련
| 가상 클래스 | 설명 | 예시 |
|---|---|---|
:first-child |
첫 번째 자식 | li:first-child |
:last-child |
마지막 자식 | li:last-child |
:nth-child(n) |
n번째 자식 | li:nth-child(2) |
:nth-last-child(n) |
뒤에서 n번째 자식 | li:nth-last-child(2) |
:only-child |
자식이 하나뿐인 경우 | span:only-child |
같은 태그(Type) 기준
| 가상 클래스 | 설명 | 예시 |
|---|---|---|
:first-of-type |
같은 태그 중 첫 번째 | p:first-of-type |
:last-of-type |
같은 태그 중 마지막 | p:last-of-type |
:nth-of-type(n) |
같은 태그 중 n번째 | p:nth-of-type(2) |
:nth-last-of-type(n) |
같은 태그 중 뒤에서 n번째 | p:nth-last-of-type(2) |
:only-of-type |
같은 태그가 하나뿐인 경우 | h1:only-of-type |
조건(Condition) 관련
| 가상 클래스 | 설명 | 예시 |
|---|---|---|
:not() |
조건에 해당하지 않는 요소 | img:not(.thumbnail) |
:is() |
여러 선택자를 하나로 묶음 | :is(h1,h2,h3) |
:where() |
:is()와 동일하지만 우선순위가 0 |
:where(nav ul li) |
:has() |
특정 자식을 가진 요소 선택 | div:has(img) |
:empty |
내용이 없는 요소 | div:empty |
:root |
문서의 루트 요소(html) | :root |
링크(Link) 관련
| 가상 클래스 | 설명 | 예시 |
|---|---|---|
:link |
방문하지 않은 링크 | a:link |
:visited |
방문한 링크 | a:visited |
:any-link |
모든 링크 | a:any-link |
입력(Form) 관련
| 가상 클래스 | 설명 | 예시 |
|---|---|---|
:required |
필수 입력 | input:required |
:optional |
선택 입력 | input:optional |
:valid |
유효한 입력 | input:valid |
:invalid |
유효하지 않은 입력 | input:invalid |
:read-only |
읽기 전용 | input:read-only |
:read-write |
수정 가능 | input:read-write |
:placeholder-shown |
placeholder가 표시 중인 상태 | input:placeholder-shown |
:in-range |
범위 내 값 | input:in-range |
:out-of-range |
범위를 벗어난 값 | input:out-of-range |
◆ CSS 가상 요소 종류
대표적인 CSS 가상 요소(Pseudo-element)
| 가상 요소 | 설명 | 예시 |
|---|---|---|
::before |
요소의 내용 앞에 새로운 요소 생성 | p::before |
::after |
요소의 내용 뒤에 새로운 요소 생성 | p::after |
::first-letter |
첫 글자 선택 | p::first-letter |
::first-line |
첫 번째 줄 선택 | p::first-line |
::selection |
사용자가 드래그한(선택한) 영역 | ::selection |
::placeholder |
input의 placeholder 텍스트 | input::placeholder |
::marker |
목록(li)의 마커(•, 숫자 등) | li::marker |
::file-selector-button |
파일 선택(input type=”file”) 버튼 | input::file-selector-button |
::backdrop |
전체 화면(fullscreen) 요소의 배경 | dialog::backdrop |
참고
::before와::after는 새로운 가상의 요소를 생성하는 반면, 나머지 가상 요소들은 기존 요소의 특정 부분을 선택하는 역할을 합니다.
◆ 브라우저 호환성에 주의해야 하는 가상 클래스 / 가상 요소
가상 클래스
| 가상 클래스 | Chrome | Edge | Firefox | Safari | IE |
|---|---|---|---|---|---|
:has() |
105+ | 105+ | 121+ | 15.4+ | ❌ |
:is() |
88+ | 88+ | 78+ | 14+ | ❌ |
:where() |
88+ | 88+ | 78+ | 14+ | ❌ |
:focus-visible |
86+ | 86+ | 85+ | 15.4+ | ❌ |
:focus-within |
60+ | 79+ | 52+ | 10.1+ | ❌ |
:placeholder-shown |
47+ | 79+ | 51+ | 9+ | ❌ |
:any-link |
65+ | 79+ | 50+ | 9+ | ❌ |
가상 요소
| 가상 요소 | Chrome | Edge | Firefox | Safari | IE |
|---|---|---|---|---|---|
::placeholder |
57+ | 79+ | 51+ | 10.1+ | ⚠️ 일부만 지원 |
::marker |
86+ | 86+ | 68+ | 11.1+ | ❌ |
::file-selector-button |
89+ | 89+ | 82+ | 14.1+ | ❌ |
::backdrop |
37+ | 79+ | 47+ | 15.4+ | ❌ |
Tip
최근 프로젝트에서는 대부분의 최신 브라우저가
:has()까지 지원하지만, IE(Internet Explorer)를 지원해야 하는 환경이라면:has(),:is(),:where(),::marker등의 사용은 주의해야 합니다.
댓글남기기