얼마전에 조금 헷갈렸던 부분인데 정리를 위해 쓰는 글입니다.
CSS 선택자 붙여쓰기와 띄어쓰기입니다.
HTML 코드
1
2
3
<div class="box">
<div class="word" id="name">hello</div>
</div>
CSS 코드
1
2
3
4
5
6
7
8
9
/*1번*/
.box #name {
font-size: 30px;
}
/*2번*/
.box#name {
font-size: 30px;
}
1번 css 코드는 제대로 적용되지만, 2번 css 코드는 적용되지 않습니다.
띄어쓰기 때문인데요.
1번 코드는 .box 클래스 안에 있는 id가 name인 자식 태그를 선택합니다.
2번 코드는 .box 클래스이면서 id가 name인 태그를 선택합니다.
즉 띄어쓰기를 하면 자식태그 선택, 붙여쓰기를 하면 여러개의 클래스를
가지고 있는 요소를 선택한다고 보면 되겠습니다.