Seleção de ID CSS para elementos com IDs pontilhados

A especificação CSS permite que seletores de ID identifiquem elementos HTML específicos. No entanto, surge um problema quando um ID contém um ponto (.). Os seletores de ID CSS não suportam nativamente esses IDs.

Apesar da falta de menção clara na especificação CSS, presume-se que os seletores de ID CSS tratam o ID com pontos como uma combinação de nome de tag e seletor de classe. Por exemplo, "#id.class" teria como alvo todos os elementos com o ID "id" e a classe "class".

No entanto, definir uma regra CSS externa que faça referência a um elemento HTML com um ID pontilhado apresenta desafios . A especificação CSS especifica que um "identificador" CSS não inclui o caractere de ponto final. Isso cria uma possível incompatibilidade entre as especificações HTML e CSS.

A solução alternativa para usar seletores de ID CSS é explorar outros tipos de seleção CSS. No entanto, nos casos em que a alteração do ID HTML não é viável, existe uma solução alternativa.

De acordo com a especificação CSS, o escape de barra invertida () é permitido. Portanto, para direcionar um elemento HTML com um ID pontilhado, use a seguinte sintaxe:

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

Neste exemplo, a barra invertida antes do ponto final permite que o seletor CSS identifique corretamente o elemento com o ID "some.id."