'HTML &amp; CSS' 카테고리의 글 목록

HTML & CSS

2023. 8. 17. 10:02

다수의 class를 선택자(selector)로 사용했을 때 헷갈리는 부분을 정리해볼까 한다.

.first-class.second-class {
	background: red;
}

두개 이상의 class를 공백 없이 넣게 되면 두개의 클래스를 모두 가지고 있는 요소가 선택된다.

.first-class, .second-class {
	background: red;
}

두개 이상의 class를 쉼표(comma)로 구분할 경우 class가 포함된 모든 요소를 선택하게 된다.

.first-class .second-class {
	background: red;
}

두개 이상의 class를 공백으로만 구별할 경우 앞에 class의 하위 요소를 선택하게 된다.

</div>

.first-class + div {
	background: red;
}

더하기로 구분할 경우 첫번째 요소의 가장 인접한 형제 요소를 선택하게 된다.

</div>

.first-class > div {
	background: red;
}

> 를 사용하여 구분할 경우 바로 하위에 있는 자식 요소들을 선택하게 된다.

</div>

.first-class ~ div {
	background: red;
}

~ 을 사용할 경우 첫번째 class의 형제 요소들을 선택하게 된다.

PREV 1 NEXT