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

Question

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

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

Answer 1

Вы можете проверить прямо в грамматике 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, недействительно. Однако я почти уверен, что видел это на практике.

Answer 2

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

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

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

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

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

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

Answer 3

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

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

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

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

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

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

Пример (ы):

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

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

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

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

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

Answer 4

Я подробно ответил на ваш вопрос здесь: 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>

Answer 5

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

-?(?:[_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.

Answer 6

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

.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 с именами, начинающимися с чисел, действительными?

Answer 7

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

Answer 8

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

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

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

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