[css] 선택자(selectors) - 조합 선택자

• 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

참고 : http://siana.tistory.com/205