[CSS] CSS 복합선택자

CSS기초

CSS 복합 선택자

---

 

 

-일치 선택자

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

// (태그+클래스)
span.orange {
  color: red;
}

<span class="orange">오렌지</span>

 

 

 

-자식 선택자

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

ul > .orange {
  color: red;
}


<ul>
  <li class="orange">오렌지</li>----O
</ul>
<span class="orange">오렌지</span>--X

 

 

 

-하위(후손)선택자

ABC XYZ : 선택자 ABC의 하위요소 XYZ 선택. '띄어쓰기'가 선택자의 기호!

div .orange {
  color: red;
}


<div>
  <ul>
    <li class="orange">오렌지</li>----O
  </ul>
  <span class="orange">오렌지</span>--O
</div>
<span class="orange">오렌지</span>--X

 

 

-인접 형제 선택자

ABC + XYZ : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

선택자 li 중 orange class를 가지고 있는 요소의 다음 형제 요소 하나

.orange + li {
  color: red;
}


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

 

 

 

-일반 형제 선택자

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

선택자 li 중 orange class를 가지고 있는 요소의 다음 형제 요소 모두

.orange ~ li {
  color: red;
}



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