하위 태그 적용

개요

태그이름 하위태그이름 { 속성1:속성값; 속성2:속성값; }

위와 같이 태그이름 사이에 공백을 넣은 CSS 설정은 특정 태그 하위에 있는 태그에 CSS를 적용시킨다.

이전 설정처럼 태그이름 뒤에 #아이디 .클래스명 을 붙여 특정 아이디나 클래스명에도 CSS를 적용 할 수 있다.

사용법

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>
출력 결과:
yellow_box div 클래스 내의 span 입니다.
c_box div 아이디 내의 span 입니다.
div 내의 blue_span 클래스 span 입니다.
div 내의 c_span 아이디 span 입니다.
yellow_box div 클래스 내에 있지 않은 span 입니다.
c_box div 아이디 내에 있지 않은 span 입니다.