CSS 선택자 - 복합 선택자

CSS 선택자는 크게 5 종류로 구분할 수 있습니다.

 각각 기본, 복합, 가상 클래스, 가상 요소 및 속성입니다.

 

이번 글에서는 복합 선택자를 다루겠습니다.

1. ABC.XYZ

선택자 ABC와 XYZ를 동시에 만족하는 요소를 선택하겠다는 의미를 가지며

일치 선택자(Basic Selector)로 부릅니다.

 

2. ABC > XYZ

선택자 ABC의 자식 요소 XYZ를 선택하겠다는 의미를 가지며

자식 선택자(Child Selector)로 부릅니다.

 

3. ABC  XYZ

선택자 ABC의 하위 요소 XYZ를 선택하겠다는 의미를 가지며

하위(후손) 선택자(Descendant Combinator)로 부릅니다.

'띄어쓰기'가 선택자의 기호입니다.

 

4. ABC + XYZ

선택자 ABC의 다음 형제 요소 XYZ 하나를 선택하겠다는 의미를 가지며

인접 형제 선택자(Adjacent Sibling Combinator)로 부릅니다.

예제에 나오듯이, "망고"가 스타일에 적용됩니다.

 

5. ABC ~ XYZ

선택자 ABC의 다음 형제 요소 XYZ 모두를 선택하겠다는 의미를 가지며

일반 형제 선택자(General Sibling Combinator)로 부릅니다.

예제에 나오듯이, "망고"와 "수박"이 스타일에 적용됩니다.