CSS 가상 클래스(Pseudo-class)는 HTML 요소 자체에 직접 적용하는 대신 CSS 클래스와 결합하여 사용하면 훨씬 더 정교하고 선택적인 스타일링이 가능합니다. 예를 들어 같은 클래스를 공유하는 여러 요소 중에서도 언어 속성(lang)이나 형제 요소 사이에서의 순서 같은 특정 조건을 만족하는 요소만 골라 스타일을 지정할 수 있습니다.
예제 1: :lang() 가상 클래스와 클래스 결합
다음은 CSS 가상 클래스와 CSS 클래스를 결합한 첫 번째 예제입니다. 각 div 요소에 지정된 lang 속성 값에 따라 국기처럼 보이는 그라디언트 배경이 적용되고, ::after 가상 요소를 통해 추가 텍스트가 함께 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid black;
}
.Italy:lang(it)::after {
padding: 20px;
content: '~ Italy';
font-style: italic;
}
.Spain:lang(es)::after {
padding: 8px;
content: '~ Spain';
font-style: italic;
}
.Germany:lang(nl)::after {
padding: 20px;
content: '~ Belgium';
font-style: italic;
}
.Spain:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
background-image: linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
background-image: linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div class="Italy" lang='it'>Rome</div>
<div class="Germany" lang='nl'>Brussels</div>
<div class="Spain" lang='es'>Madrid</div>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 화면에 나타납니다.
예제 2: :nth-child() 가상 클래스와 클래스 결합
두 번째 예제는 :nth-child() 가상 클래스를 .child 클래스와 결합하여, 컨테이너 안의 형제 요소들에게 순서대로 서로 다른 배경색을 지정하는 방법을 보여줍니다. 이 기법은 리스트 항목이나 카드형 레이아웃에 색상 변화를 주고 싶을 때 유용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin: 5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child {
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-child(1){
background-color: #FF8A00;
}
.child:nth-child(2){
background-color: #F44336;
}
.child:nth-child(3){
background-color: #C303C3;
}
.child:nth-child(4){
background-color: #4CAF50;
}
.child:nth-child(5){
background-color: #03A9F4;
}
.child:nth-child(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS 가상 클래스와 CSS 클래스</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div>
<br>
</fieldset>
</form>
</body>
</html>
출력 결과
위 코드는 다음과 같은 결과를 생성합니다.
