Селектор CSS для элемента, который его идентификатор находится в форме "foo: bar"

При использовании инфраструктуры веб-приложений JSF идентификатор элементов внутри формы может быть автоматически сгенерирован каркасом и когда компонент находится в форме, в которой его идентификатор равен form1, среда автоматически генерирует идентификатор в форме of form1:foo для этого элемента. Хотя это можно отключить, мне было интересно, можно ли определить селектор идентификаторов CSS для элементов, которые их идентификатор находится в форме foo:bar.

Спасибо заранее.

Ответ 1

В соответствии с спецификация W3c, связанная с этим ответом, используя двоеточия в идентификаторах элементов является неправильным, если используется неизолированный.

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

Является ли структура JSF действительно выводить эти идентификаторы в окончательный визуализированный HTML?

Ответ 2

Вы можете использовать \ для выхода из двоеточия.

#foo\:bar {
    color: red;
}

Работает и в селекторах jQuery.

См. также:

Ответ 3

Я провел некоторое исследование о том, как избежать любого символа в CSS и написал об этом здесь: http://mathiasbynens.be/notes/css-escapes Обратите внимание, что существует много особенности, о которых явно не упоминается.

Ive также создал инструмент, который автоматически избегает любой последовательности символов для использования в CSS и/или JavaScript: http://mothereff.in/css-escapes#0foo%3Abar