[CSS] 다중 조건 선택자

[개요]

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; }

 

[예시]

[결과]