정의 및 사용 방법

#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>

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

실제 적용된 모습

구문

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

위의 #id_value 구문은 [id="id_value"]로 선택한 요소와 동일합니다.

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

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

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

동일한 요소를 #id_value 선택자와 [id="id_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 선택자를 사용하기보다는 구체성이 낮은 다른 선택자를 사용하는 것이 유지보수의 편의성 측면에서 더 좋습니다.

명세서

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

브라우저 호환성

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

참고문헌

같이 보기