CSS 코스

부모 자식 선택자

개요

선택자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>