CSS ' > ' 선택자, 부모 바로 아래 자식만 영향..

CSS ' > ' 선택자 의미는 뭘까? 부모와 자식의 관계를 나타내는 것이라고 한다.

뭔 소리냐면 <div><span></span></div>라는 구조로 되어 있을 때 CSS에서 ' div > span {속성:값} ' 형태로 작성하면 div가 부모가 되고, span은 자식이 된다는 것이다.

이 경우 부모 바로 아래의 자식에 한해서만 작동하고, 그 이하로는 영향을 받지 않게 된다.

만약 ' div span '이라고 한다면 이때는 div가 부모가 되고, span은 후손이 된다고 한다.

이 경우 부모 아래의 모든 후손에게 영향을 주게 된다.

 

<style>

.div1 {background:yellow;}

.div2 {background:gray;}

.div1 > .div2 {background:green;}

</style>

 

<div class="div1"> // 첫 번째 div

<p>1. 아리아리</p>

 

        <div class="div2"> // 두 번째 div

        <p>2. 쓰리쓰리</p>

        

                <div class="div2"> // 세 번째 div

                <p>3. 아라리요</p>

                </div>

 

        </div>

 

</div>

 

위의 div는 div1 안에 div2가 있고, 또 다시 div2 안에 div2가 들어가 있는 구조다.

' > ' 선택자를 사용해서 ' .div1 > .div2 '로 작성하면 두 번째 div의 배경색은 green이 되고, 세 번째 div의 배경색은 gray인 것을 볼 수 있다.

' > 선택자 없이 ' .div1 div2 '로 작성하면 두 번째, 세 번째 div 모두 배경색이 green이 되는 것을 볼 수 잇다.