CSS ' > ' 선택자, 부모 바로 아래 자식만 영향..
최고관리자
2015-06-27 (토) 10:01
7년전
신고
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이 되는 것을 볼 수 잇다. |