선택자의 조합

하위 선택자

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

<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선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용
• 선택자와 선택자를 ',(콤마)'로 구분

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

자식선택자 -child selector

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

<!--
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>