css 셀렉터(selector 선택자) 띄어쓰기 의미, div id

css 셀렉터(selector 선택자)에서 띄어쓰기가 있을 때와 없을 때는 차이가 발생합니다.

우선, css id 셀렉터 selector 기본 문법은 이렇습니다.

/* Syntax */
#id_value { style properties }


[id=id_value] { style properties }

css 셀렉터(selector 선택자) 응용하여 간단한 배경색 바꾸기 소스를 작성하면 아래와 같습니다.

▷ CSS

#identified {
  background-color: skyblue;
}

▷ HTML

<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>

▷ 결과

자, 여기까진 css 기초라서 다들 아실 겁니다.

그럼 제목처럼 css 셀렉터(selector 선택자) 띄어쓰기 의미는 어떤걸까요?

아래 같은 css 소스 코드가 있다고 예를 들어볼게요.

.panel-heading [data-toggle="collapse"]:after
{
    font-family: 'Glyphicons Halflings';
    content: "\e072";
    float: right;
    color: #b0c5d8;
...
...
...
}

.panel-heading 뒤에 띄어쓰기가 있습니다. 이 경우 띄어쓰기 차이가 발생하는데요. 간략히 정리하면,

• div[id='some'] : div id가 some이라면,
• div [id='some'] : div 내부 id가 some이라면,

이렇게 분기 됩니다. 그래서 다 붙여쓸 경우와 띄어쓰기할 경우 결과가 달라집니다.

ⓒ written by vicddory