CSS 의사 클래스란?
의사 클래스(Pseudo Class)는 요소의 특수한 상태를 표현하는 CSS 선택자입니다. 단순히 문서 안의 기본 요소만 선택하는 것이 아니라, 요소의 상태(마우스 오버, 포커스 등), 위치, 방문 이력 같은 외부 요인까지 반영할 수 있습니다.
예를 들어 사용자가 링크 위에 마우스를 올렸을 때, 입력 필드의 값이 유효하지 않을 때처럼 일반적인 CSS 선택자만으로는 직접 선택할 수 없는 상황에서도 의사 클래스를 활용하면 손쉽게 스타일을 적용할 수 있습니다.
자주 사용되는 대표적인 의사 클래스
- :hover – 마우스 포인터가 요소 위에 있을 때
- :focus – 요소가 키보드 포커스를 받았을 때
- :valid / :invalid – 폼 입력값이 유효한지 여부에 따라
- :first-child / :last-child / :nth-child() – 형제 요소 중 순서에 따라
- :target – URL 해시(#)로 지정된 앵커 대상일 때
기본 문법
의사 클래스는 선택자 뒤에 콜론(:)을 붙여 사용합니다.
Selector:pseudo-class {
css-property: /*value*/;
}예제 1: :valid와 :invalid로 폼 유효성 시각화하기
다음 예제는 :valid와 :invalid 의사 클래스를 사용해 이메일과 비밀번호 입력 필드의 값이 유효한지에 따라 배경색을 다르게 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input:valid {
color: #fefefe;
background-color: #4CAF50;
}
input:invalid {
color: #fefefe;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<label for="EmailSelect">Email :
<input type="email" id="EmailSelect" size="25" required>
</label><br>
<label for="PassSelect">Password :
<input type="password" id="PassSelect" minlength="8" required>
</label>
<div id="divDisplay">Min. Strength of Password: 8<br>Both Fields are Required</div>
</fieldset>
</form>
</body>
</html>
실행 결과
입력값이 유효하지 않은 경우에는 필드가 빨간색으로 표시됩니다.
입력값이 유효한 경우에는 필드가 초록색으로 바뀝니다.
예제 2: :target으로 앵커 링크 대상 강조하기
:target 의사 클래스는 URL의 해시(#)와 연결된 요소가 현재 문서의 대상이 될 때 스타일을 적용합니다. 아래 예제에서는 버튼을 클릭해 해당 이미지 영역에 검은색 테두리를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
a {
text-decoration: none;
background:grey;
color: white;
border-radius: 3px;
padding: 6px;
}
input[type="button"] {
border-radius: 10px;
}
:target {
border:4px solid black;
margin: 0 auto;
height: 200px;
width: 200px;
background-image: url('https://www.tutorialspoint.com/arangodb/images/arangodb-mini-logo.jpg');
}
#circle {
border-radius: 50%;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<div>
<div id="circle"></div>
<div id="square"></div>
</div>
<div>
<a href="#square">Tile</a>
<a href="#circle">Avatar</a>
</div>
</fieldset>
</form>
</body>
</html>
실행 결과
버튼을 클릭하기 전에는 어떤 영역에도 테두리가 적용되지 않습니다.
'Tile' 버튼 클릭 후 – 사각형 영역이 대상이 되어 테두리가 표시됩니다.
'Avatar' 버튼 클릭 후 – 원형 영역이 대상이 되어 테두리가 표시됩니다.
마무리
의사 클래스를 활용하면 자바스크립트 없이도 사용자의 행동이나 요소의 상태에 반응하는 동적인 UI를 구현할 수 있습니다. 폼 유효성 피드백, 호버 효과, 탭 콘텐츠 전환 등 다양한 상황에서 적극적으로 활용해 보세요.