CSS) 그룹 선택자 / 가상 클래스 선택자 / 수열 선택자 정리

선택자	설명	적용 대상
그룹 선택자 : A, B, C	여러 개의 요소를 한 번에 선택	.box p, .box h3, .box a
가상 클래스 선택자 :nth-child(n)	부모의 전체 자식 중 n번째 요소가 특정 태그라면 선택	.box1 p:nth-child(2)
수열 선택자 :nth-of-type(n)	같은 타입 요소 중 n번째를 선택	.box2 p:nth-of-type(1)

---

1. 그룹 선택자( Group Selector )

: 여러 개의 선택자를 동시에 적용하고 싶을 때 사용

 

예제:

.box p, .box h3, .box a {
    background: red;
}

: .box 내부의 p, h3, a 태그에 빨간 배경 적용

<div class="box">
    <p>p tag</p>   <!-- 적용됨 -->
    <h3>h3 tag</h3> <!-- 적용됨 -->
    <a href="#">a tag</a> <!-- 적용됨 -->
    <h2>h2 tag</h2> <!-- 적용 안 됨 (선택자에 없음) -->
</div>

: .box 내부의 h2 태그는 선택자에 포함되지 않아 스타일이 적용되지 않는다.

---

2. 가상 클래스 선택자( Pseudo-class Selector )

: 특정한 상태나 구조에 따라 요소를 선택할 때 사용한다.

: first-child, last-child도 있음!

 

예제: ( :nth-child(n) )

.box1 p:nth-child(2) {
    background-color: blue;
}

.box1 내부에서 두 번째 자식 요소가 p 태그라면 적용

<div class="box1">
    <h1>h1 tag</h1>   <!-- 1번째 자식 -->
    <p>p one tag</p>  <!-- 2번째 자식 (적용됨) -->
    <p>p two tag</p>  <!-- 3번째 자식 -->
    <p>p three tag</p>  <!-- 4번째 자식 -->
</div>

: h1 태그가 첫 번째 요소이므로, 두 번째 요소인 p one tag에만 파란색 배경이 적용됨

 

주의!! : 

: nth-child(n)는 전체 요소 기준으로 순서를 따진다.

: p 태그 중 두 번째가 아니라, 전체 자식 요소에서 두 번째인 요소가 p 태그여야 적용됨

---

3. 수열 클래스 선택자

: 특정한 유형의 요소만 순서를 따져서 선택할 때 사용한다.

: first-of-type, last-of-type도 있음!

 

예제: ( :nth-of-type(n) )

.box2 p:nth-of-type(1) {
    background-color: black;
    color: white;
}

: .box2 내부에서 p 태그 중 첫 번째 요소에만 적용

<div class="box2">
    <h1>h1 tag</h1>
    <p>p one tag</p>  <!-- 적용됨 (첫 번째 p 태그) -->
    <p>p two tag</p>  <!-- 적용 안됨 -->
    <p>p three tag</p>  <!-- 적용 안됨 -->
</div>

: nth-of-type(n)은 같은 유형(타입)의 요소만 따져서 적용

: h1은 p와 다른 요소이므로, 첫 번째 p 태그(p one tag)가 선택됨

 

CSS) 후손 선택자 / 자손 선택자 / 인접, 일반 형제 선택자 정리