점으로 구분된 ID가 있는 요소에 대한 CSS ID 선택

CSS 사양을 사용하면 ID 선택기가 특정 HTML 요소를 식별할 수 있습니다. 하지만 ID에 마침표(.)가 포함되어 있으면 문제가 발생합니다. CSS ID 선택기는 기본적으로 이러한 ID를 지원하지 않습니다.

CSS 사양에 명확한 언급이 없음에도 불구하고 CSS ID 선택기는 마침표가 있는 ID를 태그 이름과 클래스 선택기의 조합으로 취급한다고 가정합니다. 예를 들어, "#id.class"는 ID가 "id"이고 클래스가 "class"인 모든 요소를 ​​타겟팅합니다.

그러나 점으로 구분된 ID가 있는 HTML 요소를 참조하는 외부 CSS 규칙을 정의하면 문제가 발생합니다. . CSS 사양에서는 CSS "식별자"에 마침표 문자가 포함되지 않도록 지정합니다. 이로 인해 HTML과 CSS 사양이 일치하지 않을 가능성이 있습니다.

CSS ID 선택기를 사용하는 대안은 다른 CSS 선택 유형을 탐색하는 것입니다. 그러나 HTML ID를 변경할 수 없는 경우 해결 방법이 있습니다.

CSS 사양에 따르면 백슬래시() 이스케이프가 허용됩니다. 따라서 점으로 구분된 ID가 있는 HTML 요소를 대상으로 지정하려면 다음 구문을 사용하십시오.

#some\.id {
  /* CSS Declarations */
}

이 예에서 마침표 앞에 백슬래시를 사용하면 CSS 선택기가 ID가 "some.id"인 요소를 올바르게 식별할 수 있습니다.