CSS 가상 클래스 구조 선택자 정리 및 사용예제
웹 문서는 계층적인 구조로 되어 있습니다. 계층적인 구조를 활용하여 특정한 요소를 찾아서 스타일을 적용하는 것을 구조적 선택자라고 생각하시면 됩니다. 스타일을 적용하기 위해서 태그에 class, id를 지정하는데 만약에 여러 요소가 계층적 구조로 되어 있다면 class, id 지정 없이 구조적 선택자를 사용하시면 훨씬 효율적입니다. 스타일을 적용할 때 자주 사용하는 방식입니다.
그럼 가상 클래스 중에서 구조 선택자 종류 및 예제로 사용하는 방법에대해서 알아보겠습니다.
가상 클래스 구조 선택자 종류
▼ 일반적인 구조 선택자
종류 | 설명 |
---|---|
:first-child | 형제 중에서 첫 번째에 위치하는 요소에 스타일 적용 |
:last-child | 형제 중에서 마지막 번째에 위치하는 요소에 스타일 적용 |
:nth-child(n) | 형제 중에서 앞에서 부터 n 번째에 위치하는 요소에 스타일 적용 |
:nth-last-child(n) | 형제 중에서 뒤에서 부터 n번째에위치하는요소에스타일적용 |
▼ 요소를 지정한 구조 선택자
종류 | 설명 |
---|---|
:first-of-type | 형제 중에서 지정한 요소의 첫 번째에 위치하는 요소에 스타일 적용 |
:last-of-type | 형제 중에서 지정한 요소의 마지막 번째에 위치하는 요소에 스타일 적용 |
:nth-of-type(n) | 형제 중에서 지정한 요소의 앞에서 부터n번째에 위치하는 요소에 스타일 적용 |
:nth-last-type(n) | 형제 중에서 지정한 요소의 뒤에서 부터n번째에위치하는요소에스타일적용 |
예제 1) 일반적인 구조 선택자 예시
1. 예제 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>구조 선택자</title>
<style>
/* order1의 자식 중에서 첫 번째 요소에 스타일 적용*/
.order1 > :first-child {
background-color: red;
}
/* order1의 자식 중에서 마지막 번째 요소에 스타일 적용*/
.order1 > :last-child {
background-color: blue;
}
/* order2의 자식 중에서 홀수 번째 요소에 스타일 적용*/
.order2 > :nth-of-type(2n) {
color: red;
}
/* order2의 자식 중에서 짝수 번째 요소에 스타일 적용*/
.order2 > :nth-child(2n+1) {
color: blue;
}
</style>
</head>
<body>
<h2>first-child, last-child</h2>
<ul class="order1">
<li>1번째</li><li>2번째</li><li>3번째</li>
<li>4번째</li><li>5번째</li><li>6번째</li>
</ul>
<h2>nth-child(n)</h2>
<ul class="order2">
<li>1번째</li><li>2번째</li><li>3번째</li>
<li>4번째</li><li>5번째</li><li>6번째</li>
</ul>
</body>
</html>
2.실행 결과 화면

예제 2) 일반적인 구조 선택자와 요소를 지정한 구조 선택자 비교
1. 예제 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>구조 선택자</title>
<style>
/* contents의 자식 중에서 세번째 요소에 스타일 적용*/
.contents > :nth-child(3) {
background-color: red;
}
/* contents의 자식 중에서 p 요소 중에서 세번째 요소에 스타일 적용*/
.contents > p:nth-of-type(3) {
background-color: blue;
}
</style>
</head>
<body>
<div class="contents">
<h2>제목 1</h2>
<p>내용 1</p>
<h2>제목 2</h2>
<p>내용 2</p>
<h2>제목 3</h2>
<p>내용 3</p>
<h2>제목 4</h2>
<p>내용 3</p>
</div>
</body>
</html>
2.실행 결과 화면

예제 3) 표에서 짝수 번째 행에 배경색 지정
1. 예제 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>구조 선택자</title>
<style>
table {
border: 2px solid #000; /* 표 테두리에 검음색 실선 표시 */
border-spacing: 20px 10px; /* 셀 사이 여백 지정 */
border-collapse: collapse; /* 표 테두리를 한 줄에 표시 */
}
th, td {
border: 1px dotted #000; /* 셀 테두리에 검은색 점선 표시 */
padding: 10px; /* 설 테두리와 내용 사이에 여백 지정 */
text-align: center; /* 셀 내용을 가운데 정렬 */
}
/* 짝수 번째 행에 백그라운드 색상 지정 */
tr:nth-child(2n) {
background-color: orange;
}
</style>
</head>
<body>
<table>
<tr><th>학년</th><th>학번</th><th>이름</th><th>학과</th></tr>
<tr><td>1</td><td>B10001</td><td>홍길동1</td><td>컴퓨터공학과</td></tr>
<tr><td>1</td><td>B10002</td><td>홍길동2</td><td>물리과</td></tr>
<tr><td>2</td><td>B10003</td><td>홍길동3</td><td>식품공학과</td></tr>
<tr><td>2</td><td>B10004</td><td>홍길동4</td><td>화학과</td></tr>
</table>
</body>
</html>
2.실행 결과 화면

CSS 선택자 관련 이전 게시글
- CSS 선택자 유형 – 전체, 태그, 클래스, ID, 그룹
- CSS 결합(Combinators) 선택자 – 자손, 자식, 형제 결합자
- CSS 속성(Attribute) 선택자 정리, 7가지 종류
- CSS 가상 클래스 반응 선택자 (:hover, :active 등)
- CSS가상클래스상태선택자(:enabled,:disabled등)
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!