Quais caracteres são válidos nos nomes / seletores de classe CSS?

Quais caracteres / símbolos são permitidos nos seletores de classe CSS ?
Sei que os seguintes caracteres são inválidos , mas que caracteres são válidos ?

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

Você pode verificar diretamente na gramática CSS .

Basicamente ¹ , um nome deve começar com um sublinhado ( _), um hífen ( -) ou uma letra ( a- z), seguido por qualquer número de hífens, sublinhados, letras ou números. Existe um problema: se o primeiro caractere é um hífen, o segundo caractere deve ser ² uma letra ou sublinhado e o nome deve ter pelo menos 2 caracteres.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

Em resumo, a regra anterior se traduz no seguinte, extraída da especificação do W3C. :

No CSS, os identificadores (incluindo nomes de elementos, classes e IDs nos seletores) podem conter apenas os caracteres [a-z0-9] e os caracteres ISO 10646 U + 00A1 e superior, além do hífen (-) e o sublinhado (_) ; eles não podem começar com um dígito ou um hífen seguido por um dígito. Os identificadores também podem conter caracteres de escape e qualquer caractere ISO 10646 como um código numérico (consulte o próximo item). Por exemplo, o identificador "P&B?" pode ser escrito como "B \ & W \?" ou "B \ 26 W \ 3F".

Identificadores começando com um hífen ou sublinhado são normalmente reservados para extensões específicas do navegador, como em -moz-opacity.

¹ Tudo ficou um pouco mais complicado com a inclusão de caracteres unicode escapados (que ninguém realmente usa).

² Observe que, de acordo com a gramática que eu vinculei, uma regra começando com DOIS hífens, por exemplo --indent1, é inválida. No entanto, tenho certeza que já vi isso na prática.

Para minha surpresa, a maioria das respostas aqui estão erradas. Acontece que:

Qualquer caractere, exceto NUL, é permitido nos nomes de classe CSS em CSS. (Se o CSS contiver NUL (escapado ou não), o resultado será indefinido. [ CSS-caracteres ])

A resposta de Mathias Bynens tem links para explicações e demos mostrando como usar esses nomes. Escrito em código CSS, um nome de classe pode precisar ser escapado , mas isso não altera o nome da classe. Por exemplo, uma representação desnecessariamente excedida em escape parecerá diferente de outras representações com esse nome, mas ainda se refere ao mesmo nome de classe.

A maioria das outras linguagens (de programação) não tem esse conceito de escapar nomes de variáveis ​​(“identificadores”), portanto, todas as representações de uma variável devem ter a mesma aparência. Este não é o caso em CSS.

Observe que, no HTML, não há como incluir caracteres de espaço (espaço, tabulação, avanço de linha, avanço de formulário e retorno de carro) em um atributo de nome de classe , porque eles já separam as classes.

Portanto, se você precisar transformar uma sequência aleatória em um nome de classe CSS: cuide de NUL e espaço e escape (de acordo com CSS ou HTML). Feito.

Respondi a sua pergunta em profundidade aqui: http://mathiasbynens.be/notes/css-escapes

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

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

CSS:

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

JavaScript:

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

Leia a especificação do W3C . (isto é CSS 2.1, encontre a versão apropriada para sua suposição de navegadores)

editar: parágrafo relevante a seguir:

No CSS, os identificadores (incluindo nomes de elementos, classes e IDs nos seletores) podem conter apenas os caracteres [a-z0-9] e os caracteres ISO 10646 U + 00A1 e superior, além do hífen (-) e o sublinhado (_) ; eles não podem começar com um dígito ou um hífen seguido por um dígito. Os identificadores também podem conter caracteres de escape e qualquer caractere ISO 10646 como um código numérico (consulte o próximo item). Por exemplo, o identificador "P&B?" pode ser escrito como "B \ & W \?" ou "B \ 26 W \ 3F".

edit 2: como o @mipadi aponta na resposta do Triptych, há essa ressalva , também na mesma página da web:

No CSS, os identificadores podem começar com '-' (traço) ou '_' (sublinhado). Palavras-chave e nomes de propriedades que começam com '-' ou '_' são reservados para extensões específicas do fornecedor. Essas extensões específicas do fornecedor devem ter um dos seguintes formatos:

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

Exemplos):

Por exemplo, se a organização XYZ adicionou uma propriedade para descrever a cor da borda no lado leste da tela, eles podem chamá-la de -xyz-border-east-color.

Outros exemplos conhecidos:

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

Um traço ou sublinhado inicial é garantido para nunca ser usado em uma propriedade ou palavra-chave por qualquer nível atual ou futuro de CSS. Assim, implementações CSS típicas podem não reconhecer essas propriedades e podem ignorá-las de acordo com as regras para manipulação de erros de análise. No entanto, como o traço ou sublinhado inicial faz parte da gramática, os implementadores do CSS 2.1 sempre devem poder usar um analisador em conformidade com o CSS, independentemente de suportar ou não extensões específicas do fornecedor.

Os autores devem evitar extensões específicas do fornecedor

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 seus personagens listados, exceto “ -” e “ _”, não são permitidos se usados ​​diretamente. Mas você pode codificá-los usando uma barra invertida foo\~barou usando a notação unicode foo\7E bar.

Para quem procura uma solução alternativa, você pode usar um seletor de atributos, por exemplo, se sua classe começar com um número. Mudança:

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

para isso:

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

Além disso, se houver várias classes, você precisará especificá-las no seletor, eu acho.

Fontes:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Existe uma solução alternativa para tornar válidas as classes CSS com nomes que começam com números?

Meu entendimento é que o sublinhado é tecnicamente válido. Verificação de saída:

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

"... erratas às especificações publicadas no início de 2001 tornaram os sublinhados legais pela primeira vez."

O artigo vinculado acima diz que nunca os utiliza e, em seguida, fornece uma lista de navegadores que não os suportam, os quais são, em termos de número de usuários, pelo menos, redundantes.

Para HTML5 / CSS3, as classes e os IDs podem começar com números.

Ao sair da resposta do @ Triptych, você pode usar as 2 correspondências de regex a seguir para validar uma string:

[^a-z0-9A-Z_-]

Esta é uma correspondência inversa que seleciona qualquer coisa que não seja uma letra, número, traço ou sublinhado para facilitar a remoção.

^-*[0-9]+

Corresponde a 0 ou 1 traços seguidos por 1 ou mais números no início de uma sequência, também para facilitar a remoção.

Como eu o uso no PHP:

//Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
//Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
//Make sure the string is 2 or more characters long
return 2 <= strlen($class) ? $class : '';