복합 선택자

ABCXYZ : 일치 선택자

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

span.orange{
  color: red;
}

span태그에 class가 orange인 요소를 선택

 

ABC > XYZ : 자식 선택자

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

ul > .orange{
  color: red;
}

ul태그의 자식 요소 class이름이 orange인 요소를 선택

 

ABC XYZ : 하위(후손) 선택자

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

div .orange{
  color: red;
}

div 아래의 class이름이 orange인 모든 요소를 선택

 

ABC + XYZ : 인접 형제 선택자

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

.orange + li{
  color: red;
}

li태그중 클래스이름이 orange인 요소 다음 요소를 선택(하나)

  <ul>

    <li>딸기</li>

    <li>수박</li>

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

    <li>망고</li>  <--- 선택

    <li>사과</li>

  </ul>

 

ABC ~ XYZ 일반 형제 선택자

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

.orange ~ li{
  color: red;
}

  <ul>

    <li>딸기</li>

    <li>수박</li>

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

    <li>망고</li>

    <li>사과</li>

  </ul>