[CSS] 다중 조건 셀렉터

 

CSS에서 여러 다른 태그들  혹은 다른 아이디, 클래스명에 대한 HTML 요소들에 같은 CSS 스타일을 적용할 수 있다.

 

CSS 선택자에서 AND나 OR 같은 선택자를 사용할 수 있다.

 

 

AND

선택자 사이 공백없이 붙여서 사용하면 여러 선택자를 동시에 만족하는 태그에 스타일을 적용할 수 있다.

div#id{
	padding: 10px;
    background-color: violet;
}

div.class{
	margin: 20px;
    width: 30%;
}

.class#id{
	background-color: blue;
}

 

 

 

OR

: 쉼표를 사용해 두 선택자 중 하나라도 만족할 경우 해당 CSS 효과를 적용할 수 있다.

: 여러 개의 태그 등을 쉼표로 연결해 모두 같은 스타일링이 가능하다.

#id, .class, button{
	color: white;
    font-size: 20px;
}
반응형

'Front-End > CSS' 카테고리의 다른 글

[CSS] 단위(px, %, vh, vm, rem etc.)  (2) 2022.11.25
[CSS] 가장 기본적인 사용  (0) 2022.11.25
[CSS] 가상 셀렉터(Pseudo Selector)  (1) 2022.11.24
[CSS] 부모 자식 셀렉터  (0) 2022.11.24
[CSS] display: grid  (0) 2022.11.24