Какие символы допустимы в именах / селекторах классов CSS?

Какие символы / символы разрешены в селекторах классов CSS ?
Я знаю, что следующие символы недопустимы , но какие символы допустимы ?

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

Вы можете проверить прямо в грамматике CSS .

В основном ¹ , имя должно начинаться с символа подчеркивания ( _), дефиса ( -) или буквы ( a- z), за которым следует любое количество дефисов, символов подчеркивания, букв или цифр. Есть загвоздка: если первый символ является дефисом, второй символ должен быть ² буквой или подчеркиванием, а имя должно быть длиной не менее 2 символов.

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

Короче говоря, предыдущее правило переводится в следующее, извлеченное из спецификации W3C. :

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-z0-9] и символы ISO 10646 U + 00A1 и выше, плюс дефис (-) и знак подчеркивания (_) ; они не могут начинаться с цифры или с дефиса, за которым следует цифра. Идентификаторы также могут содержать экранированные символы и любые символы ISO 10646 в виде числового кода (см. Следующий пункт). Например, идентификатор "B & W?" может быть написано как "B \ & W \?" или "B \ 26 W \ 3F".

Идентификаторы, начинающиеся с дефиса или подчеркивания, обычно зарезервированы для специфичных для браузера расширений, как в -moz-opacity.

¹ Все это немного усложняется включением экранированных символов Юникода (которые никто в действительности не использует).

² Обратите внимание, что в соответствии с грамматикой, с которой я связан, правило, начинающееся с ДВУХ дефисов, например --indent1, является недействительным. Тем не менее, я уверен, что видел это на практике.

К моему удивлению, большинство ответов здесь неверны. Оказывается, что:

Любой символ, кроме NUL, допускается в именах классов CSS в CSS. (Если CSS содержит NUL (экранированный или нет), результат не определен. [ CSS-символы ])

Ответ Матиаса Биненса содержит ссылки на объяснения и демонстрации, показывающие, как использовать эти имена. Записанное в коде CSS, имя класса может нуждаться в экранировании , но это не меняет имя класса. Например, излишне избыточно экранированное представление будет отличаться от других представлений с таким именем, но оно все равно ссылается на то же имя класса.

Большинство других (программных) языков не имеют этой концепции экранирования имен переменных («идентификаторов»), поэтому все представления переменной должны выглядеть одинаково. Это не так в CSS.

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

Итак, если вам нужно превратить случайную строку в имя класса CSS: позаботьтесь о NUL и пробеле, и экранируйте (соответственно для CSS или HTML). Выполнено.

Я подробно ответил на ваш вопрос здесь: http://mathiasbynens.be/notes/css-escapes

В статье также объясняется, как избежать любого символа в CSS (и JavaScript), и я также создал удобный инструмент для этого. С этой страницы:

Если бы вы присвоили элементу значение идентификатора ~!@$%^&*()_+-=,./';:"?><[]{}|`#, селектор выглядел бы так:

CSS:

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

JavaScript:

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

Прочитайте спецификацию W3C . (это CSS 2.1, найдите подходящую версию для вашего браузера)

изменить: соответствующий абзац следующий:

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-z0-9] и символы ISO 10646 U + 00A1 и выше, плюс дефис (-) и знак подчеркивания (_) ; они не могут начинаться с цифры или с дефиса, за которым следует цифра. Идентификаторы также могут содержать экранированные символы и любые символы ISO 10646 в виде числового кода (см. Следующий пункт). Например, идентификатор "B & W?" может быть написано как "B \ & W \?" или "B \ 26 W \ 3F".

изменить 2: как @mipadi указывает в ответе Триптиха, есть это предостережение , также на той же веб-странице:

В CSS идентификаторы могут начинаться с «-» (тире) или «_» (подчеркивание). Ключевые слова и имена свойств, начинающиеся с «-» или «_», зарезервированы для расширений, специфичных для поставщика. Такие специфичные для поставщика расширения должны иметь один из следующих форматов:

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

Примеры):

Например, если организация XYZ добавила свойство для описания цвета границы на восточной стороне экрана, они могли бы назвать его -xyz-border-east-color.

Другие известные примеры:

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

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

Авторы должны избегать специфичных для поставщика расширений

Полное регулярное выражение:

-?(?:[_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])*

Таким образом, все ваши перечисленные символы, кроме « -» и « _», не допускаются, если используются напрямую. Но вы можете закодировать их, используя обратную косую черту foo\~barили кодировку Unicode foo\7E bar.

Для тех, кто ищет обходной путь, вы можете использовать селектор атрибута, например, если ваш класс начинается с числа. Изменить:

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

к этому:

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

Кроме того, если есть несколько классов, вам нужно будет указать их в селекторе, я думаю.

Источники:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Есть ли обходной путь, чтобы сделать классы CSS с именами, которые начинаются с допустимых чисел?

Насколько я понимаю, подчеркивание является технически обоснованным. Проверять, выписываться:

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

«... ошибки в спецификации, опубликованной в начале 2001 года, впервые подчеркнули законность».

В статье, приведенной выше, говорится, что никогда не используйте их, затем приведен список браузеров, которые их не поддерживают, и все они, по крайней мере с точки зрения количества пользователей, являются избыточными.

Для HTML5 / CSS3 классы и идентификаторы могут начинаться с цифр.

Исходя из ответа @ Triptych, вы можете использовать следующие 2 совпадения регулярных выражений, чтобы сделать строку допустимой:

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

Это обратное совпадение, при котором выбирается все, что не является буквой, цифрой, тире или подчеркиванием для легкого удаления.

^-*[0-9]+

Это соответствует 0 или 1 тире, за которыми следуют 1 или более цифр в начале строки, также для легкого удаления.

Как я использую это в 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 : '';