본문 바로가기
CSS

CSS 선택자(selectors) - 조합 선택자

by 샷타이거 2011. 12. 28.



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/ 의 스크립트를 이용 방안이 있는데 따로 설명예정.

마지막으로 위의 예제를 적용한것은 아래참조

http://sianasiatiger.cafe24.com/study/CSS_seletor.html

댓글