CSS의 고급 선택자는 단순히 태그 이름이나 클래스만으로 요소를 지정하는 것을 넘어, 요소 간의 관계나 속성 값을 기반으로 더욱 정교하게 스타일을 적용할 수 있게 해주는 강력한 기능입니다. 대표적인 고급 선택자로는 인접 형제 선택자(+), 일반 형제 선택자(~), 직계 자식 선택자(>), 속성 선택자, 그리고 nth-of-type 선택자 등이 있습니다.
주요 고급 선택자의 종류
1. 일반 형제 선택자 (~)
특정 요소 뒤에 오는 모든 형제 요소를 선택합니다. 예를 들어 h1 ~ h3는 h1 요소 이후에 등장하는 모든 h3 요소를 대상으로 스타일을 적용합니다.
h1 ~ h3
2. 인접 형제 선택자 (+)
바로 다음에 위치한 형제 요소 하나만 선택합니다. 예를 들어 ul + h3는 ul 요소 바로 뒤에 오는 h3에만 스타일이 적용됩니다.
3. 직계 자식 선택자 (>)
부모 요소의 직접적인 자식만 선택합니다. div > span은 div의 한 단계 아래 자식인 span에만 적용되며, p 태그처럼 더 깊이 중첩된 span에는 영향을 주지 않습니다.
div > span
4. 속성 선택자 ([ ])
요소가 가진 속성 값을 기준으로 선택합니다. 예를 들어 a[href="https://www.wikipedia.org"]처럼 특정 href 값을 가진 링크만 골라서 스타일을 지정할 수 있습니다.
5. nth-of-type 선택자
같은 유형의 요소 중 n번째 요소를 선택합니다. ul:nth-of-type(1)은 문서에서 첫 번째 ul 요소를 의미합니다.
CSS 고급 선택자 예제 코드
아래는 위에서 설명한 고급 선택자들을 모두 활용한 전체 예제입니다.
예제
<html>
<head>
<style>
#red {
color: red;
}
.green {
background: green;
}
ul:nth-of-type(1) {
background: rgb(0, 174, 255);
}
ul + h3 {
border: 4px solid rgb(19, 0, 128);
}
a[href="https://www.wikipedia.org"] {
font-size: 25px;
}
h1 ~ h3 {
font-size: 40px;
}
div > span {
background-color: DodgerBlue;
}
</style>
</head>
<body>
<h1>Advanced Selectors Example</h1>
<ul>
<li>Cow</li>
<li>Dog</li>
<li>Cat</li>
</ul>
<ul>
<li>Puma</li>
<li>Leopard</li>
<li>Cheetah</li>
</ul>
<h3>Animals</h3>
<div>
<span>Text sample</span>
<p>
Paragraph Text
<span>span text</span>
</p>
<p class="green">Paragraph Text</p>
<p id="red">Paragraph Text.</p>
<p class="green">Paragraph Text</p>
</div>
<a href="https://www.google.com">www.google.com</a>
<a href="https://www.wikipedia.org" target="_blank">www.wikipedia.org</a>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
- 문서에서 첫 번째 ul 요소에만 하늘색(rgb(0, 174, 255)) 배경이 적용됩니다.
- ul 바로 뒤에 오는 h3 요소에는 4px 두께의 남색 테두리가 생성됩니다.
- div의 직계 자식 span("Text sample")에는 도저 블루(DodgerBlue) 배경색이 적용되지만, p 태그 안에 중첩된 span("span text")에는 적용되지 않습니다.
- wikipedia.org 링크는 속성 선택자에 의해 25px 크기로 표시되며, google.com 링크는 기본 크기를 유지합니다.
- h1 이후에 등장하는 h3 요소는 일반 형제 선택자에 의해 40px 크기로 커집니다.
