Seletor CSS com ponto no ID

96

A especificação HTML permite pontos (.) Em um id:

<img id="some.id" />

No entanto, o uso de uma regra de seletor de código CSS não corresponderá corretamente:

#some.id { color: #f00; }

A especificação CSS para seletores de ID não menciona esse caso. Portanto, presumo que esteja usando a combinação de um nome de tag e um seletor de classe . Por exemplo, uma regra CSS de a.classNamese aplicaria a todas as tags âncora ( <a>) com um nome de classe de className, como <a class="className"></a>.

É possível ter uma regra de arquivo CSS externo que faz referência a um elemento HTML por seu id que contém um ponto?

Espero que não, já que a especificação CSS especifica que um " identificador " CSS não inclui o período como um caractere válido. Então, essa é uma incompatibilidade fundamental entre as especificações HTML e CSS? Minha única alternativa é usar um tipo diferente de seleção CSS? Alguém mais esperto do que eu pode confirmar ou negar isso?

(Eu removeria o ponto do atributo de id HTML para simplificar as coisas, mas é um id gerado pelo sistema, então não tenho a capacidade de alterá-lo neste caso.)

html  css  css-selectors 
— Jon Adams
fonte
Você poderia dizer que esta é uma incompatibilidade fundamental entre HTML e CSS. No entanto, como são duas línguas diferentes, não se espera que correspondam; um identificador HTML é um identificador HTML, enquanto um identificador CSS é um identificador CSS. Além disso, o CSS pode definir o estilo de outras linguagens, não apenas HTML (embora garantido, o CSS foi feito para HTML no início).
— BoltClock
3
Também #some.idestá usando a combinação de ID e seletor de classe.
— BoltClock
O ID é o único atributo que você tem como gancho de estilo? Eu sei que é um pouco fora do assunto, mas estou me perguntando por que você deseja usar um ID em vez de img ou uma classe (se disponível).
— Jayx
@Jayx RE "Por que usar um ID em vez de img (tag) ou uma classe?" Isso varia por vários motivos e situações. Mas, neste caso, um elemento específico precisava de um estilo, nem todas as imagens da página. Uma classe poderia ter sido usada se o HTML pudesse ser modificado, mas neste caso não poderia ser modificado, pois foi gerado por um sistema fora do nosso controle.
— Jon Adams

Respostas:

194

Clássico. Depois de vasculhar todas as especificações ao escrever a pergunta, eu li um pouco mais e descobri que há um caractere de escape. Nunca precisei disso antes, mas as especificações CSS permitem o escape de barra invertida (\) como a maioria das linguagens. O que você sabe?

Portanto, no meu exemplo, a seguinte regra corresponderia:

#some\.id { color: #f00; }

— Jon Adams
fonte
8
Bom trabalho de pesquisa. Deveria haver mais perguntas e respostas como esta, não como „escreva meu código ao invés de mim“.
— Pavlo
3
boa pesquisa. Acabei de encontrar isso em um grande aplicativo empresarial em que estou trabalhando. Eu estava totalmente perplexo e nunca tinha visto isso antes. qual é o ponto de fazer um id com um ponto final?
— Anthony
1
@Anthony: Não há uma razão específica para colocar um ponto final em um atributo de id HTML. Acho que às vezes os autores só querem? Talvez, em alguns casos, possa haver sangramento dos sistemas de implementação subjacentes que podem usar pontos nos identificadores do código do lado do servidor para processamento de formulário? Tenho certeza de que todos que o fazem têm seus próprios motivos; mas não há razão HTML / CSS para incluí-los.
— Jon Adams
1
Obrigado, eu estava tendo problemas com o OpenLayers, pois ele usa pontos em seus ids. Por exemplo: "OpenLayers.Control.Attribution_7". Acho que ajuda com o código interno onde eles podem ter o nome da variável javascript com o mesmo valor do próprio id.
— Hoffmann
3
Eu estava pensando em adicionar uma nova pergunta e escrever minha própria resposta, mas decidi apenas comentar aqui. Se estiver usando o pré-processador Stylus, você precisará usar duas barras invertidas, por exemplo, #some\\.idpara escapar do caractere especial. A primeira barra invertida é consumida pela Stylus, deixando a barra invertida restante no CSS compilado, que atinge o resultado desejado descrito nesta resposta.
— markrian de
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.