CSS에서 의사 요소(Pseudo-elements)는 HTML 요소에 직접 적용할 수 있을 뿐만 아니라, CSS 클래스에도 함께 적용할 수 있습니다. 이를 활용하면 특정 클래스를 가진 여러 요소에 일관된 스타일 효과를 손쉽게 부여할 수 있습니다.
핵심 개념 정리
의사 요소와 클래스를 조합하면 다음과 같은 장점이 있습니다.
- ::selection — 사용자가 텍스트를 드래그하여 선택했을 때의 배경색과 글자색을 지정합니다.
- :nth-child() — 부모 요소 안에서 몇 번째 자식인지에 따라 스타일을 다르게 적용할 수 있습니다.
- 클래스 선택자와 결합하면 동일한 클래스를 공유하는 요소들에 규칙적으로 색상을 매핑할 수 있습니다.
예제
아래 예제에서는 .child 클래스에 ::selection 의사 요소와 :nth-child() 구조적 의사 클래스를 조합하여, 각 항목을 선택했을 때 서로 다른 배경색이 표시되도록 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Elements and CSS Classes</title>
<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{
line-height: .1em;
border: 4px solid black;
}
::selection{
color:white;
}
.child:nth-child(1), h1::selection{
background-color: #FF8A00;
}
.child:nth-child(2), div::selection{
background-color: #F44336;
}
.child:nth-child(3), p::selection{
background-color: #C303C3;
}
.child:nth-child(4), article::selection{
background-color: #4CAF50;
}
.child:nth-child(5), code::selection{
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Elements and CSS Classes</legend>
<div id="container">
<h1>A Heading</h1>
<div>Welcome to DIV World</div>
<p>Every one is welcome in this town. Make yourself comfertable</p>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</article>
<code>function helloWorld(){ document.write("Hello World");}</code>
<div><span class="child">h1</span><span class="child">div</span><span class="child">p</span><span class="child">article</span><span class="child">code</span></div>
</div>
</body></html>출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
초기 화면
<h1> 요소 및 <div> 요소 선택 시
<p> 요소 및 <article> 요소 선택 시
<code> 요소 선택 시
마무리
이처럼 의사 요소를 클래스와 함께 사용하면 반복되는 스타일 선언을 줄이고, 요소별로 세밀하게 다른 시각적 피드백을 제공할 수 있습니다. 특히 ::selection은 웹 페이지의 텍스트 선택 경험을 개선하는 데 유용하게 활용됩니다.