Quais os caracteres que são válidos nos nomes/selectores da classe CSS?

Todos os caracteres, exceto NUL, são permitidos nos nomes das classes CSS em CSS. (Se o CSS contiver NUL (escapado ou não), o resultado não é definido. [caracteres CSS])

A resposta de Mathias Bynens liga-se a explicação e demonstrações mostrando como usar estes nomes. escrito em código CSS, um nome de classe pode precisar de escapar , mas isso não muda a classe nome. Por exemplo, uma representação desnecessariamente sobre-escapada parecerá diferente de outras representações desse nome, mas ainda se refere ao mesmo nome de classe.

A maioria das outras linguagens (de programação) não têm esse conceito de escapar de nomes de variáveis ("identificadores"), por isso todas as representações de uma variável têm de parecer iguais. Não é o caso no CSS.

Note que no HTML não existe forma de incluir caracteres de espaço (espaço, página, Linha De Alimentação, forma de alimentação e transporte return) in a class name attribute, because they already separate classes from each other.

Então, se você precisar transformar uma cadeia aleatória em um nome de classe CSS: tome cuidado com NUL e espaço ,e escape (de acordo com CSS ou HTML). Terminar.

Leia o specW3C . (este é o CSS 2.1, encontre a versão apropriada para a sua assunção de navegadores)

Editar: o parágrafo relevante é o seguinte:

Em CSS, identificadores (incluindo nomes dos elementos, classes e IDs em selectores) podem conter apenas o caracteres [a-z0-9] e ISO 10646 caracteres U+00A1 e superiores, mais a hífen ( - ) e o sublinhado (_); não podem começar com um dígito, ou um hífen seguido de um dígito. Os identificadores também podem conter evadido caracteres e qualquer carácter ISO 10646 como código numérico (ver item seguinte). Para exemplo, o identificador "B & W?"pode ser escrito como " B\&W\?"ou" B \ 26 W \ 3F".

Edit 2: como @mipadi aponta na resposta do tríptico, há este caveat , também na mesma página web:

Em CSS, os identificadores podem começar por' -' (traço) ou " _ " (sublinhado). Palavra e nomes de propriedades começando com" -" ou " _ " estão reservados para extensões específicas do Fornecedor. Tal as extensões específicas do Fornecedor devem ter um dos seguintes formatos:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Exemplo (S):

Por exemplo, se a organização XYZ adicionou uma propriedade para descrever a cor de a fronteira no lado leste do exibição, podem chamar-lhe - XYZ-border-east-color.

Outros exemplos conhecidos:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

Um traço inicial ou sublinhado é garantido nunca a ser usado em um propriedade ou palavra-chave por qualquer actual ou nível futuro de CSS. Assim típico CSS implementações podem não reconhecer tais propriedades e pode ignorá-las de acordo com as regras de manipulação erros de processamento. No entanto, devido à dash inicial ou underscore é parte de a gramática, CSS 2.1 implementadores deve ser sempre capaz de usar um Analisador sintético conforme com o CSS, mesmo que não eles suportam qualquer fornecedor específico extensao.

Os autores devem evitar o fornecedor específico. extensões

O artigo também explica como escapar de qualquer personagem em CSS (e JavaScript), e eu fiz uma ferramenta útil para isso também. A partir dessa página:

Se você desse a um elemento um valor ID de ~!@$%^&*()_+-=,./';:"?><[]{}|`#, o selector ficaria assim:

CSS:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

A expressão regular completa é:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Portanto, todos os caracteres listados excepto " -" e "_ " não são permitidos se forem usados directamente. Mas você pode codificá-los usando uma barra invertida foo\~bar ou usando a notação unicode foo\7E bar.

Para quem procura uma solução de trabalho, pode usar um selector de atributos, por exemplo, se a sua classe começar com um número. Variação:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

Para isto:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Também, se houver várias classes, você vai precisar especificá-las no selector, eu acho.

Fontes:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. existe uma solução para fazer aulas de CSS com nomes que começam com números válidos?

As classes e IDs HTML5/CSS3 podem começar com números.

Https://developer.mozilla.org/en/underscores_in_class_and_id_names

"...errata à especificação publicada no início de 2001 tornou underscores legais pela primeira vez."

O artigo acima diz para nunca os usar, depois dá uma lista de navegadores que não os suportam, todos os quais são, em termos de número de utilizadores, pelo menos, redundantes.