[HTML/CSS/JS] CSS 복합 선택자

일치 선택자(Basic Combinator)

선택자 A,B 동시에 만족하는 요소 선택. ex) span.orange{ } 이렇게 붙여서 씀. → 반대의 경우 .orangespan 이라는 이름의 클래스를 선택할 수 있으니 순서에 유의해서 사용.

자식 선택자(Child Combinator)

선택자 A의 자식 B 선택. A > B { } 형태로 선택.

하위(후손) 선택자(Descendant Combinator)텍스트

선택자 A의 하위요소 B 선택. 띄어쓰기를 통해 선택. A B { } 형태.

인접 형태 선택자(Adjacent Sibling Combinator)

선택자 A의 “다음” 형제요소 B “한 개”를 선택.
ex) 다음 중 .text + li { } 로 선택할 경우, <li>넷</li> 이 선택된다.

<li>하나</li>

<li>둘</li>

<li class=”text”>셋</li>

<li>넷</li>

<li>다섯</li>

일반 형제 선택자(General Sibling Combinator)

선택자 A의 다음 형제 요소 “모두” 선택.

ex) 다음 중 .text ~ li { } 로 선택할 경우, <li>넷</li> , <li>다섯</li> 이 모두 선택된다.

<li>하나</li>

<li>둘</li>

<li class=”text”>셋</li>

<li>넷</li>

<li>다섯</li>