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