다중 조건 선택자
개요
CSS 선택자에서도 AND나 OR과 같은 선택자를 비슷하게 나마 쓸 수 있습니다.
태그이름#아이디 { 속성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>