#id 선택자

#id 선택자는
지정된 id 값과 일치하는 id 속성을 가진 요소를 선택합니다.
대소문자를 구분합니다.

# 바로 다음에 지정할 id 값을 붙이면, 이 값과 일치하는 id 속성을 가진 요소를 나타냅니다.

예를 들어, #chapter는 id 속성이 값이 chapter와 일치하는 요소를 선택하는 선택자입니다.

CSS 
#chapter { /* id="chapter" 속성을 가진 요소 선택 */
    background-color: darkblue;
    color: white;
}
HTML 
<p id="chapter">id 값이 chapter입니다.</p>
<p>이건 단지 문단 요소입니다.</p>
HTML id 속성
실제 적용된 모습

id 속성은
해당 요소의 고유식별자(ID, unique identifier)를 지정하는 속성입니다.
이 속성의 값은 문서(웹 페이지)에서 유일하고 고유해야 합니다.

구문

CSS 
#id_value {
    /* ... */
}

위의 구문은 다음의 [attribute="value"] 속성 선택자 구문으로 선택한 요소와 동일합니다.

CSS 
[id="id_value"] {
    /* ... */
}

[attribute="value"] 선택자는
지정된 attribute라는 이름의 속성 값이 value와 일치하는 모든 요소를 선택합니다.

[attribute="value"] 선택자

#id_value 선택자와 [attribute="value"] 선택자로 선택한 요소는 동일하지만,
#id_value 선택자는 [attribute="value"] 선택자보다 스타일 우선순위를 지정하는 구체성 값('명시도'라고도 부름)이 크다는 차이점이 있습니다.

CSS 선택자의 구체성 값

동일한 요소를 #id_value 선택자와 [attribute="value"] 선택자로 선택하면, 우선순위가 높은 #id_value 선택자로 지정한 스타일이 적용됩니다.

CSS 
#chapter { /* 구체성 값: 0, 1, 0, 0 */
    background-color: orange;
}
[id="chapter"] { /* 구체성 값: 0, 0, 1, 0 */
    background-color: green;
}
HTML 
<p id="chapter">id 값이 chapter입니다.</p>
실제 적용된 모습

주의할 점 - #id 선택자의 높은 구체성

#id 선택자는 구체성 값이 매우 높습니다.
따라서, #id 선택자를 남용하면 다른 선택자들과 충돌할 가능성이 높아집니다.
#id 선택자는 고유한 식별자로 사용되어야 하며, 스타일링이 목적인 경우에는 .class 선택자를 사용하는 것이 좋습니다.

명세서

id 선택자의 명세서 사양
명세서 사양
#id_value Selectors Level 4
#id-selectors

브라우저 호환성

id 선택자의 브라우저 호한성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
#id_value 1 12 1 1

참고문헌

같이 보기