CSS 선택자 조합

하위 선택자

• 특정 엘리먼트의 하위에 나오는 엘리먼트를 선택하는데 사용
• 부모가 먼저 나오고 자식이 나중에 나옴
• 공백을 통해서 부모와 자식을 구분

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<style type="text/css"> #navigation li{ color:blue; } </style> <div id="navigation"> <ul> <!-- 글씨가 파란색으로 표현됨 --> <li>홈</li> <li>제품소개</li> <li>고객센터</li> </ul> </div> <ul> <!-- 아래 내용은 영향을 받지 않음 --> <li>홈</li> <li>제품소개</li> <li>고객센터</li> </ul>

하나의 CSS선언을 여러개의 선택자에 적용하기

• 하나의 css선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용
• 선택자와 선택자를 ',(콤마)'로 구분

1 2 3 4 5 6 7 8 9 10

<!-- h1과 #link 선택자 사이에 ,(콤마)를 두어 글씨의 색을 붉은색으로 지정 --> <style type="text/css">     h1, #link{        color:red;     } </style> <h1>생활코딩에 오신 것을 환영합니다.</h1> <a id="link" href="http://opentutorials.org">생활코딩</a>

자식선택자 -child selector

• 특정 엘리먼트의 직접적인 하위 엘리먼트에 대해서만 선택할 때 사용(하위 선택자와 다름)
• ie6는 지원되지 않음

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!-- id navigation의 직접적인 자식인 li만 테두리가 생기고, <li>사이트</li>의 하위 엘리먼트에는 테두리가 생기지 않는다. --> <style type="text/css">     #navigation > li{         border:1px solid red;     } </style> <ul id="navigation">     <li>홈</li>     <li>사이트         <ul>            <li>생활코딩</li>            <li>코딩생활</li>         </ul>     </li>     <li></li> </ul>