CSS 가상 클래스 구조 선택자 정리 및 사용예제

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 선택자 관련 이전 게시글

위로 스크롤