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