CSS 자식선택자(Child selector)
자식선택자는 엘리멘트 하위에 엘리먼트를 선택하는 것이다.
방법은 다음과 같다
E > F{font-size:30px;}
/*an F element child of an E element( F는 E 의 자식엘리먼트이다*)/
예로"div#box >div" 이의미는 box라는 아이디를가진 div엘리먼트에 속한 div엘리먼트를 선택하는 것이다. 그러면 div#box div 자손선택자와 타이점은 무엇인가? 자식은 말그대로 아들(child) 그엘레먼트의 바로 하위에만을 의미한다. 하지만 자손은 그하위에 모든 엘리먼트를의미한다. 예를 보자
여기는 바로아래 자식이다
여기는 자시이아닌 손자이다
여기도 자식이아닌 손자(자손)이다.
css는 다음과 같다.
div#box p{ font-size:36px;}
/*자손인 모든 텍스트만 크기가 바뀐다*/
div#box > p{ font-size:36px;}
/*자식인 첫번째 텍스트만 크기가 바뀐다*/
자식선택자를 사용하면 첫번째 텍스트만 크기가 바뀔것이다. 하지만 자손 선택자의 경우는 모든텍스트의 텍스트 크기가 변한다.
따라서 자식선택자의 경우는 이와같이 별도 클래스나 아이디부여없이 선택할 수 있는 장접이 있다.
댓글