CSS ' > ' 선택자, 부모 바로 아래 자식만 영향..
페이지 정보
작성자 최고관리자 작성일15-06-27 10:01 조회7,172회 댓글0건관련링크
본문
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이 되는 것을 볼 수 잇다.
댓글목록
등록된 댓글이 없습니다.