CSS 코스

다중 조건 선택자

개요

CSS 선택자에서도 ANDOR과 같은 선택자를 비슷하게 나마 쓸 수 있습니다.

태그이름#아이디 { 속성1:속성값; 속성2:속성값; } 
태그이름.클래스명 { 속성1:속성값; 속성2:속성값; }
.클래스명#아이디 { 속성1:속성값; 속성2:속성값; }

위와 같은 선택자를 통해 여러 조건을 동시에 만족하는 태그에 스타일을 적용 할 수 있습니다. (AND 연산)

#아이디, .클래스명{ 속성1:속성값; 속성2:속성값; } 
태그이름, .클래스명{ 속성1:속성값; 속성2:속성값; } 

쉼표 (,)를 통해 두 선택자 중 하나라도 만족시 적용되는 조건을 만들 수도 있습니다. (OR 연산)

사용법

div#m_box{ width:500px; height:150px; }
div.box{ background-color:blue; }

예제

<html>
<head>
<style>
	div#m_box{ width:220px; height:150px; border: 1px solid yellow }
	div.box{ background-color:blue; }
</style>
</head>
<body>
	<div id="m_box">m_box 아이디의 div 입니다.</div>
	<div class="box">box 클래스의 div 입니다.</div>

	<span id="m_box">m_box 아이디의 span 입니다.</span>
	<span class="box">box 클래스의 span 입니다.</span>
</body>
</html>