부모 자식 선택자
개요
선택자1 선택자2 { 속성1:속성값; 속성2:속성값; }
위와 같이 태그이름 사이에 공백을 넣은 선택자는 부모 태그 하위에 있는 태그에 스타일을 적용시킵니다.
div span{ ... } 처럼 태그 이름 뿐만 아니라 #main_content .box{ ... } 처럼 아이디와 클래스를 사용 할 수도 있습니다.
사용법
div span{ text-align:center; padding:10px; }
div.yellow_box span { background-color:yellow; }
div#c_box span { text-align:center; padding:10px; }
div span .blue_span {background-color:blue; }
div span #c_span { text-align:center; padding:10px; }
예제
<html>
<head>
<style>
div.yellow_box span { background-color:yellow; }
div#c_box span { text-align:center; padding:10px; color: green; }
div span.blue_span {background-color:#09C; }
div span#c_span { text-align:center; padding:10px; color: orange; }
</style>
</head>
<body>
<div class="yellow_box">
<span>
yellow_box div 클래스 내의 span 입니다.
</span>
</div>
<div id="c_box">
<span>
c_box div 아이디 내의 span 입니다.
</span>
</div>
<div>
<span class="blue_span">
div 내의 blue_span 클래스 span 입니다.
</span>
</div>
<div>
<span id="c_span">
div 내의 c_span 아이디 span 입니다.
</span>
</div>
<div>
<span>
yellow_box div 클래스 내에 있지 않은 span 입니다.
</span>
</div>
<div>
<span>
c_box div 아이디 내에 있지 않은 span 입니다.
</span>
</div>
</body>
</html>
추가
ul > li{
list-style: none
}
위 예제처럼 > 특수문자를 사용한 선택자도 있습니다. 이는 공백을 넣은 것과 비슷하지만, 두 태그 사이에 다른 태그가 없는, 순수 부모-자식 태그간의 관계만 적용됩니다.
예제
<html>
<head>
<style>
.aa > .cc{ background-color: red }
</style>
</head>
<body>
<div class="aa">
<div class="cc">
sec1
</div>
</div>
<div class="aa">
<div class="bb">
<div class="cc">
sec2
</div>
</div>
</div>
<body>
</body>
</html>