CSS 복합 선택자

일치 선택자(Basic Combinator)

 E와 F를 동시에 만족하는 요소 선택

/* css */
span.orange{
	color:red;
}

<!-- html -->
<div>
 <ul>
   <li>사과</li>
   <li>딸기</li>
   <li class="orange">오렌지</li>   
 </ul>
 <div>당근</div>
 <p>토마토</p>
 <span class="orange">오렌지</span>
</div>

태그와 클래스가 붙어있는 형태입니다. 이것을 일치 선택자라고 부를 수 있습니다.

이것은 span태그이면서 orange라는 클래스 값을 가지는 것을 찾아야 합니다.

 

 

자식 선택자(Child Combinator)

E의 자식 요소 F를 선택

/* css */
ul > .orange{
color:red;
}

<!-- html -->
<div>
 <ul>
   <li>사과</li>
   <li>딸기</li>
   <li class="orange">오렌지</li>   <!-- 선택 -->
 </ul>
 <div>당근</div>
 <p>토마토</p>
 <span class="orange">오렌지</span>
</div>

 > 이 기호가 뜻하는 것이 자식 태그를 찾으라는 뜻입니다.

ul의 자식요소로서 li태그가 들어있는 것을 확인할 수 있습니다. 그 중에서 .orange라는 클래스 값을 가지는 태그를

선택해서 폰트의 색깔을 red로 바꿔주는 것입니다. 앞부분의 선택자는 조건이고

뒷부분의 선택자를 찾아서 적용을 하는 것입니다.

 

후손(하위) 선택자(Descendant Combinator)
 E의 후손(하위) 요소 F를 선택 '띄어쓰기'가 선택자의 기호로 사용이 됩니다.

/* css */
div .orange{
color:red;
}

<!-- html -->
<div>
 <ul>
   <li>사과</li>
   <li>딸기</li>
   <li class="orange">오렌지</li>    <!-- 선택 -->
 </ul>
 <div>당근</div>
 <p>토마토</p>
 <span class="orange">오렌지</span>  <!-- 선택 -->
</div>

 

후손이라는 말의 의미는 div 태그의 안에 있는 모든 태그를 의미하는 것 입니다. 그 모든 요소들 중에서

orange라는 클래스를 가지는 태그를 찾아라 라는 뜻입니다. 그래서 그 클래스를 가지는 요소가 선택이 됩니다.

div의 입장에서는 자식태그, ul 입장에서는 부모 태그입니다.

그리고 ul의 자식으로는 li태그가 있고 li태그의 입장에서는 ul이 부모태그가 됩니다.

그러면 div의 입장에서 li태그는 후손(하위)요소이다 라고 볼 수 있고 반대로는 조상(상위)요소라고 부를 수 있습니다.

그리고 같은 부모를 가진 li들은 형제 요소라고 부릅니다.

ul입장에서 div, p , span태그가 모두 다 형제 요소들입니다.

자식요소들도 후손요소에 포함이 되는 것입니다.

 

인접 형제 서택자(Adjacent Sibling Combinator)
 E의 다음 형제 요소 F 하나만 선택

 

/* css */
.orange + li{
  color:red;
}

<!-- html -->
<ul>
 <li>딸기</li>
 <li>수박</li>
 <li class="orange">오렌지</li>
 <li>망고</li> <!-- 선택 -->
 <li>사과</li> 
</ul>

선택자와 선택자 사이에 + 기호가 있는 것을 확인하실 수 있습니다.

 

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

 E의 다음 형제 요소 F 모두 선택

/* css */
.orange ~ li {
 color: red;
}

<!-- html -->
<ul>
 <li></li>
 <li></li>
 <li class="orange"></li>
 <li></li> <!-- 선택 -->
 <li></li> <!-- 선택 -->
</ul>

인접형제와 일반형제는 모두 조건의 다음에 있는 요소를 찾는 것입니다.

그래서 ~ 일반 형제 선택자로 .orange의 다음에 있는 모든 요소인 li 요소를 다 찾는 것 입니다.