CSS 선택자(selectors) - 조합 선택자
최근까지 엄청나게 발전해 온 만큼 빠진것도 넣고.. 다시 한번 둘러볼겸 포스팅
일단 예제 html을 올린다
<h1>CSS선택자</h1>
<div>
<h2>맛있는반찬</h2>
<p>맛있게 먹어봅시다</p>
<p>으히히</p>
<ul>
<li><em>매운</em>꽃게탕</li>
<li>라면<em>밥</em></li>
<li><em>카레</em>라이스</li>
</ul>
<p>그런데 달랑<strong>3개</strong>뿐</p>
<div><p>지금은 저녁인데ㅠㅠ</p></div>
</div>
자손 선택자 A B
아주 잘 알고있는것 부모의 자손엘리먼트를 지정
div ul li{ color:#009;}
위의 것을 보면 "매운꽃게탕,라면밥, 카레라이스"가 색깔이변한다
공통 선택자 A * B
구애 받지않고 모든것. * 는 모든것을 의미한다. A * B 일때는 조건이 있다. A는 상위 부모여야하고 B는 A말고 바로 직계부모를 가져야 한다.
div * em{ color:#F00;}
캐스케이딩으로 순서를 생가하면 em으로 찻반째 보다 두번째로 적용된다
직계자식 선택자 A > B
B는 A의 직계자식이여야한다. 자손 선택자와 달리 명확함을 돋보이게한다 자손의 경우 div p strong 으로 지정하거나 손자로 바로 div strong으로 적용가능하지만 직계자손은 div > p > strong 처럼 바로 부모 자식순서로 정확하게 있어야가능하다.
div > p > strong{color:#F00;}
인접형제 선택자 A + B
A다음 오는 B엘리먼트라 생각하면된다
h2 + p{ font-size:13px;}
일반형제 선택자 A ~ B
A이후에 나오는 B엘리먼트들을 가르키는데 그 B엘리먼트가 같은 트리안에 포함될 때 까지 적용된다.
h2 ~ p{ color:#903;}
자손 선택자를 빼고는 익스플로어6 에서 적용안된다.또한 일반형제 선택자는 익스플로어7이하로적용 안된다.
앞으로 설명할 여러선택자들 그리고 더욱이 CSS3로 넘어가면 지원이 미흡한데 그의 해결 방안은 http://code.google.com/p/ie7-js/ 의 스크립트를 이용 방안이 있는데 따로 설명예정.
마지막으로 위의 예제를 적용한것은 아래참조
댓글