상호작용 및 상태 기반 요소 선택하기
CSS에서는 사용자가 HTML 요소와 상호 작용하거나, 요소가 특정 상태일 때에만
해당 요소에 가상의 클래스를 적용하여 요소를 선택하는 가상 클래스(Pseudo-class) 선택자가 있습니다.
다양한 가상 클래스 선택자의 종류와 특징을 확인할 수 있다.
가상 클래스란 무엇인가?
사용자가 HTML 요소에 마우스 커서를 올리거나 체크박스에 체크하는 등 상호작용을 하거나, 요소가 특정 상태나 위치를 만족할 때만 스타일을 적용할 수 있는 선택자가 있습니다.
이러한 선택자를 가상 클래스(Pseudo-class, '의사 클래스'라고도 함)라고 합니다.
이 선택자는 사용자가 요소와 상호작용하거나, 요소가 특정 상태를 만족할 때 해당 요소에 적용되며,
실제 클래스 선택자(.class)는 아니지만 가상의 클래스를 지정하여 요소에 스타일을 적용할 수 있습니다.
‘Pseudo’는 '가상'이라는 뜻으로, 이러한 특성 때문에 이 선택자를 '가상 클래스'라고 부릅니다.
가상 클래스의 구문
- 가상 클래스는 콜론(:) 기호 뒤에 가상 클래스 이름(예::hover,:cheked)을 붙여 사용합니다.
- 함수형 가상 클래스는 괄호 안에 인수를 넣어(예: :nth-child(2),:not(.active)) 사용할 수 있습니다.
button:hover { /* 마우스 커서를 올렸을 때만 요소 선택 */
    background-color: orange;
}
input:checked { /* 체크된 상태일 때만 요소 선택 */
    background-color: red;
}
/* 함수형 가상 클래스 */
li:nth-child(2) { /* 두 번째 자식일 때만 요소 선택 */
    background-color: blue;
}
button:not(.active) { /* active 클래스 값이 없을 때만 요소 선택 */
    background-color: silver;
}가상 클래스 선택자 목록
가상 클래스 선택자는 사용자의 상호작용 가상 클래스와 특정 상태나 위치 가상 클래스 두 목록으로 나누었습니다.
사용자의 상호작용 가상 클래스
| :active | 요소에 마우스를 올려 놓고 누르고 있을 동안 선택 :active가상 클래스 선택자는 요소에 마우스 커서를 올려 놓고 누르는 순간부터 떼는 시점까지 해당 요소를 선택합니다. 이 기간 동안에만 미리 정의된 스타일이 적용되므로, 사용자에게 인터랙티브하고 동적인 사용자 경험을 제공합니다. | 
|---|---|
| :checked | 라디오 버튼( <input type="radio">)과 체크박스(<input type="checkbox">)가 체크된 상태일 때 선택:checked가상 클래스 선택자는 라디오 버튼과 체크박스가 체크된 상태일 때 해당 요소를 선택합니다. 라디오 버튼이나 체크박스의 상태 변화에 따라 스타일을 동적으로 변경하여 인터랙티브한 사용자 경험을 구현하는 데 활용됩니다. | 
| :focus | 요소가 포커스되었을 동안 선택 :focus가상 클래스 선택자는 요소가 포커스되었을 동안 해당 요소를 선택합니다. 주로 사용자가 탭(Tab) 키나 클릭을 통해 요소에 접근했을 때 발생합니다. | 
| :focus-visible | 시각적 포커스 표시가 꼭 필요하다고 판단될 때 선택 :focus-visible가상 클래스 선택자는 포커스 상태인 요소 중에서 브라우저가 사용자를 위해 시각적으로 포커스 상태임을 표시하는 것이 적절하다고 판단한 경우에만 해당 요소를 선택합니다. | 
| :focus-within | 요소 또는 자손 중 포커스되었을 동안 선택 :focus-within가상 클래스 선택자는 요소 또는 그 요소의 자손 중 하나가 포커스되었을 동안 해당 요소를 선택합니다. 이 선택자는 부모 요소에 스타일을 지정할 수 있다는 점이:focus가상 클래스와 다릅니다. | 
| :hover | 요소에 마우스를 올려 놓았을 동안 선택 :hover가상 클래스 선택자는 요소에 마우스 커서를 올려 놓았을 동안 해당 요소를 선택합니다. 사용자가 마우스 커서로 요소 위에 올려 놓았을 동안에만 미리 정의된 스타일이 적용되기 때문에 인터랙티브하고 동적인 사용자 경험을 제공할 수 있습니다. | 
특정 상태나 위치 기반 가상 클래스
| :disabled | 실제로 비활성화된 요소 선택 :disabled가상 클래스 선택자는 HTML의disabled속성으로 인해 실제로 비활성화된 요소를 선택합니다. 접근성 측면에서 이 선택자는 비활성화된 요소임을 시각적으로 표현할 때 매우 유용합니다. | 
|---|---|
| :enabled | 활성화 상태인 요소 선택 :enabled가상 클래스 선택자는 HTML의disabled속성으로 인해 실제로 비활성화되지 않고 원래의 활성화 상태인 요소를 선택합니다. 반면,:disabled가상 클래스 선택자는 비활성화된 요소를 선택합니다. | 
| :first-child | 첫 번째 자식 요소 선택 :first-child가상 클래스 선택자는 부모 요소의 자식 요소 중에서 제일 첫 번째에 위치하는 요소를 선택합니다. 이 선택자는:nth-child(1)과 동일합니다. | 
| :first-of-type | 같은 이름 태그 형제 중 첫 번째 요소 선택 first-of-type가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서만 기준으로 첫 번째에 위치하는 요소를 선택합니다. | 
| :has() | 관계 선택자 목록 중 가지고 있으면 선택 :has()함수형 가상 클래스 선택자는 괄호 안의 관계 선택자 목록 중 하나라도 관계를 가지고 있으면 요소를 선택합니다. 관계 선택자(Relative selector)란 형제나 자손 관계 조합을 나타내는 선택자를 말합니다. | 
| :is() | 선택자 목록 중 하나라도 존재하면 선택 :is()함수형 가상 클래스 선택자는 괄호 안의 선택자 목록 중 하나라도 존재하는지 확인해서 있으면 요소를 선택합니다. 여러 선택자를 쉼표로 구분하여 묶어, 그 중 하나라도 일치하면 요소를 선택합니다. | 
| :lang() | 콘텐츠 언어에 따라 요소를 선택 :lang(콘텐츠 언어) 가상 클래스 선택자는 인수로 주어진 콘텐츠 언어를 기반으로lang속성과 그 값을 가진 요소를 선택합니다. | 
| :last-child | 마지막 자식 요소 선택 :last-child가상 클래스 선택자는 부모 요소의 자식 요소 중에서 제일 마지막에 위치하는 요소를 선택합니다. 이 선택자는:nth-last-child(1)과 동일합니다. | 
| :link | 아직 방문하지 않은 링크를 선택 :link가상 클래스 선택자는 브라우저의 방문 기록을 기준으로, 아직 방문하지 않은 링크를 선택합니다. | 
| :not(selectorX) | selectorX를 제외한 나머지 요소를 선택 :not(selectorX)함수형 가상 클래스 선택자는 인수로 취하는 selectorX와 일치하지 않는 요소를 선택합니다. 이 선택자는 특정 선택자를 제외한 나머지 요소에 스타일을 적용하고 싶을 때 사용합니다. | 
| :nth-child(n) | n 번째 자식 요소 선택 :nth-child(n)은 부모 요소의 자식 중 순서가 n 번째인 요소를 선택하는 가상 클래스입니다. 예를 들어,:nth-child(2)는 자식들 중에서 2 번째에 위치하는 요소를 선택합니다. | 
| :nth-last-child(n) | 뒤에서 n 번째 자식 요소 선택 :nth-last-child(n)은 부모 요소의 자식 중 순서가 뒤에서 n 번째인 요소를 선택하는 가상 클래스입니다. 예를 들어,:nth-last-child(2)는 자식들 중에서 순서를 마지막(last) 뒤에서부터 계산해 2 번째에 위치하는 요소를 선택합니다. | 
| :nth-last-of-type(n) | 같은 이름 태그 형제 중 뒤에서 n 번째 요소 선택 :nth-last-of-type(n)가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서만 기준으로 순서가 뒤에서 n 번째에 위치하는 요소를 선택합니다. | 
| :nth-of-type(n) | 같은 이름 태그 형제 중 n 번째 요소 선택 :nth-of-type(n)가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서만 기준으로 n 번째에 위치하는 요소들을 선택합니다. | 
| :only-child | 외동 자식 요소 선택 :only-child가상 클래스 선택자는 해당하는 요소가 부모의 외동 자식, 즉, 형제가 없이 오직 유일한 자식(only child)인 요소를 선택합니다. | 
| :only-of-type | 자식 요소 중에서 유일한 태그 이름 선택 :only-of-type가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 제일 첫 번째이자 마지막에 위치하는 유일한(only, 단독) 요소를 선택합니다. | 
| :placeholder-shown | 플레이스홀더 텍스트가 표시 중인 요소 선택 :placeholder-shown가상 클래스는placeholder속성이 적용된<input>또는<textarea>중에서 현재 플레이스홀더 텍스트가 표시되고 있는 해당 요소를 선택합니다. | 
| :root | 문서의 루트 요소 선택 :root가상 클래스 선택자는 문서의 루트(root) 요소를 선택합니다. HTML 문서에서는 루트 요소인<html>요소를 선택합니다. 이 선택자는 최상위 요소를 선택한다는 의미적 일관성을 유지하기 위해 사용하며, 글로벌 CSS 변수를 선언할 때 주로 활용됩니다. | 
| :visited | 이미 방문한 링크를 선택 :visited가상 클래스 선택자는 브라우저의 방문 기록을 기준으로, 이미 방문한 링크를 선택합니다. | 
| :where() | :is()와 동일하지만 구체성 값은 없는 선택자:where()함수형 가상 클래스 선택자는 괄호 안의 선택자 목록 중 하나라도 존재하는지 확인해서 있으면 요소를 선택합니다.:is()와 모든 측면에서 동일하지만, 구체성 값이 없습니다. | 
명세서
| 명세서 사양 | |
|---|---|
| Pseudo-classes | HTML #pseudo-classes | 
| Pseudo-classes | Selectors Level 4 | 
| Pseudo-classes | CSS Scoping Module Level 1 |