Выбор идентификатора CSS для элементов с точечными идентификаторами

Спецификация CSS позволяет селекторам идентификаторов идентифицировать определенные элементы HTML. Однако проблема возникает, когда идентификатор содержит точку (.). Селекторы идентификаторов CSS изначально не поддерживают такие идентификаторы.

Несмотря на отсутствие четкого упоминания в спецификации CSS, предполагается, что селекторы идентификаторов CSS рассматривают идентификатор с точками как комбинацию имени тега и селектора класса. Например, «#id.class» будет нацелен на все элементы с идентификатором «id» и классом «class».

Однако определение внешнего правила CSS, которое ссылается на элемент HTML с идентификатором, разделенным точками, создает проблемы. . Спецификация CSS указывает, что «идентификатор» CSS не включает символ точки. Это создает потенциальное несоответствие между спецификациями HTML и CSS.

Альтернативным решением использования селекторов идентификаторов CSS является изучение других типов выбора CSS. Однако в случаях, когда изменение идентификатора HTML невозможно, существует обходной путь.

Согласно спецификации CSS допускается экранирование обратной косой черты (). Таким образом, чтобы настроить таргетинг на HTML-элемент с идентификатором, разделенным точками, используйте следующий синтаксис:

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

В этом примере обратная косая черта перед точкой позволяет селектору CSS правильно идентифицировать элемент с идентификатором «some.id».