Combinator (복합 선택자)

복합 선택자 (Combinator)

 

일치 선택자(Basic Combinator)

 

두 태그를 동시에 만족하는 요소 선택 ( 붙여쓰기, and 연산 )

 

<!--css-->
//li: 태그이면서 .tomato: 클래스 tomato인 요소

li.tomato {

}

<!--==========================-->

<!--html-->

<li class="fruit"> 과일 </li>
<li> 물건 </li>
<li class="tomato">토마토</li>  <!--********여기*********-->

 

자식 선택자(Child Combinator)

 

특정 태그의 자식 태그 요소를 선택 ( > )

(자식 : 바로 밑의 태그(요소))

(형제 : 부모 태그를 공유하는 태그(요소) )

 

<!--css-->
// ul: 태그 요소의 자식(li) 중에서 .tamato: class가 tomato인 요소

ul>.tomato {

}

<!--==========================-->

<!--html-->

<ul>
    <li class="fruit"> 과일 </li>
    <li> 물건 </li>
    <li class="tomato">토마토</li>  <!--********여기*********-->
</ul>

 

후위(하위) 선택자(Descendant Combinator)

 

특정 태그의 후손(하위) 요소의 태그를 선택 ( 띄어쓰기 )

(후손(하위) : 특정 태그 안(이하)에 있는 모든 요소)

(조상(상위) : 특정 태그 위(이상)에 있는 모든 요소)

 

<!--css-->
// div: div태그의 후손(div 태그 내의 모든 요소) 중 .tomato: class가 tomato인 요소

div .tomato {

}

<!--==========================-->

<!--html-->

<div>
    <ul>
        <li class="fruit"> 과일 </li>
        <li> 사과 </li>
        <li class="tomato">토마토</li>  <!--********여기*********-->
    </ul>
    <ul>
        <li class="fruit2"> 과일2 </li>
        <li> 포도 </li>
        <span class="tomato">토마토</span>  <!--********여기*********-->
    </ul>
</div>

 

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

 

특정 태그의 다음 형제 요소 모두 선택 ( - )

 

<!--css-->
// li: 태그를 찾은 후 .fruit2: class 요소의 다음 형제 요소 모두 선택

.fruit2 - li {

}

<!--==========================-->

<!--html-->

<div>
    <ul>
        <li class="fruit"> 과일 </li>
        <li> 사과 </li>
        <li class="tomato">토마토</li>  
    </ul>
    <ul>
        <li> 오렌지 </li>
        <li> 파인애플 </li>
        <li class="fruit2"> 과일2 </li>
        <li> 포도 </li>  <!--********여기*********-->
        <span class="tomato">토마토</span>  <!--********여기*********-->
    </ul>
</div>

 

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

 

특정 태그의 다음에 나오는 형제 태그 하나만 선택 ( + )

 

<!--css-->
// li: 태그를 찾은 후 .fruit2: class 요소의 다음 형제 요소를 선택

.fruit2 + li {

}

<!--==========================-->

<!--html-->

<div>
    <ul>
        <li class="fruit"> 과일 </li>
        <li> 사과 </li>
        <li class="tomato">토마토</li>  
    </ul>
    <ul>
        <li> 오렌지 </li>
        <li> 파인애플 </li>
        <li class="fruit2"> 과일2 </li>
        <li> 포도 </li>  <!--********여기*********-->
        <span class="tomato">토마토</span>  
    </ul>
</div>