css 기초2 복합 선택자

# 복합 선택자

 

1)ABCXYZ - 일치 선택자

선택자 ABC와 XYZ를 동시에 만족하는 요소 선택

 

예시

ul.orange

---

2)ABC > XYZ - 자식 선택자

선택자 ABC의 자식요소 XYZ선택

 

예시

ul > .orange

---

3)ABC XYZ - 하위(후손)선택자

사실상 2)와 기능은 같다.

 

예시

ul .orange

---

4)ABC + XYZ - 인접 형제 선택자

선택자 ABC의 다음 형제 요소 중 XYZ를 선택

이 개념이 설명이 없다면 약간 난해하다.

 

예시

.orange + li

 

<li class=‘orange’>오렌지</li>

<li>망고</li>

 

이렇게 있을때, 선택자 적용은 망고에만 된다.

이유는 선택자 ornage클래스의 다음 형제줄에 나오는 것 중에서

li가 있는 것이 망고 이기 때문이다.

---

5)ABC ~ XYZ - 일반 형제 선택자

선택자 ABC의 다음 형제 요소 중 XYZ를 모두 선택

 

예시

.orange ~ li

라고 되어있을때

 

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li class=‘orange’>오렌지</li>

<li>4</li>

<li>5</li>

</ul>

 

이 중에서 ABC로써 선택된 선택자가 orange클래스 이기 때문에

orange 클래스 다음으로 나오는 4와 5에 대해서 적용이 된다.