Gestion d'un deux-points dans un ID d'élément dans un sélecteur CSS [dupliquer]

L'utilisation d'une barre oblique inverse avant le côlon ne fonctionne pas dans de nombreuses versions D'IE (en particulier 6 et 7; peut-être d'autres).

Une solution de contournement consiste à utiliser le code hexadécimal pour les deux-points-qui est \ 3A

Exemple:

input#search_form\3A expression {  }

Cela fonctionne dans tous les navigateurs: y compris IE6+ (et peut-être plus tôt?), Firefox, Chrome, Opera, etc. Il fait partie de la norme CSS2.

Cet article vous dira comment échapper à N'importe quel caractère en CSS.

Maintenant, il y a même un outil pour cela: http://mothereff.in/css-escapes#0search%5fform%3Aexpression

TL; DR toutes les autres réponses à cette question sont incorrectes. Vous devez échapper à la fois le trait de soulignement (pour empêcher IE6 d'ignorer complètement la règle dans certains cas de bord) et le caractère deux-points pour que le sélecteur fonctionne correctement sur différents navigateurs.

Techniquement, le côlon le caractère peut être échappé comme \:, mais cela ne fonctionne pas dans IE \3a:

#search\_form\3a expression {}

Vous pouvez l'échapper avec une barre oblique inverse

input#search_form\:expression {
  ///...
}

À partir de la spécification CSS

4.1.3 caractères et casse

Les règles suivantes sont toujours valables:

Toutes les feuilles de style CSS sont insensibles à la casse, sauf pour les parties qui ne sont pas sous le contrôle de CSS. Par exemple, la sensibilité à la casse des valeurs des attributs HTML "id" et "class", des noms de polices et des Uri ne relève pas de la portée de cette spécification. Notez en particulier que les noms d'éléments sont insensible à la casse en HTML, mais sensible à la casse en XML. En CSS, les identifiants (y compris les noms d'éléments, les classes et les identifiants dans les sélecteurs) ne peuvent contenir que les caractères [a-z0-9] et les caractères ISO 10646 U+00A1 et supérieurs, plus le trait d'Union (-) et le trait de soulignement (_); ils ne peuvent pas commencer par un chiffre, ou un trait d'Union suivi d'un chiffre. Les identificateurs peuvent également contenir des caractères échappés et N'importe quel caractère ISO 10646 sous forme de code numérique (voir l'élément suivant). Par exemple, l'identifiant " B & W?"peut être écrit comme" B\ & W\?" ou "B \ 26 W \ 3F". Notez que Unicode est code par code équivalent à ISO 10646 (voir [UNICODE] et [ISO10646]).

Dans CSS 2.1, un caractère antislash () indique trois types d'échappements de caractères. Tout d'abord, à l'intérieur d'une chaîne, une barre oblique inverse suivie d'un retour à la ligne est ignorée (c'est-à-dire que la chaîne est réputée ne contenir ni la barre oblique inverse ni le retour à la ligne).

Deuxièmement, il annule la signification des caractères CSS Spéciaux. N'importe quel caractère (sauf un chiffre hexadécimal) peut être échappé avec une barre oblique inverse à enlevez sa signification particulière. Par exemple, "\"" est une chaîne composée d'un double guillemet. Les préprocesseurs de feuille de Style ne doivent pas supprimer ces barres obliques inverses d'une feuille de style car cela changerait la signification de la feuille de style.

Troisièmement, les échappements antislash permettent aux auteurs de se référer à des caractères qu'ils ne peuvent pas facilement mettre dans un document. Dans ce cas, la barre oblique inverse est suivie d'au plus six chiffres hexadécimaux (0..9A..F), qui représente le caractère ISO 10646 ([ISO10646]) avec ce numéro, qui doit de ne pas être égale à zéro. (Il n'est pas défini dans CSS 2.1 que se passe-t-il si une feuille de style contient un caractère avec un point de code Unicode zéro.) Si un caractère dans la plage [0-9a-f] suit le nombre hexadécimal, la fin du nombre doit être claire. Il y a deux façons de le faire:

Avec un espace (ou un autre caractère d'espace): "\ 26 B "("&B"). Dans ce cas, les agents utilisateurs doivent traiter une paire " CR / LF "(U+000D/U+000A) comme un seul caractère d'espace. en fournissant exactement 6 chiffres hexadécimaux: "\000026B " ("&B") En fait, ces deux méthodes peuvent être combinées. Un seul caractère d'espace est ignoré après un échappement hexadécimal. Notez que cela signifie qu'un "vrai" espace après la séquence d'échappement doit lui-même être échappé ou doublé.

Si le nombre est en dehors de la plage autorisée par Unicode (par exemple, "\ 110000 "est supérieur au maximum 10ffff autorisé dans Unicode actuel), L'UA peut remplacer l'échappement par le" caractère de remplacement " (U + FFFD). Si le caractère doit être affiché, L'UA doit montrer un symbole visible, tel qu'un glyphe "caractère manquant" (cf. 15.2, point 5).

Note: les échappements antislash, lorsqu'ils sont autorisés, sont toujours considérés comme faisant partie d'un identifiant ou d'une chaîne (c'est-à-dire que "\7B" n'est pas une ponctuation, même si "{" l'est, et "\32" est autorisé au début d'un nom de classe, même si "2" ne l'est pas). L'identifiant "te \ st" est exactement le même identifiant que "test".

Dans JSF 2,0, vous pouvez spécifier le séparateur en utilisant le web.fichier xml comme init-param de javax.face.SEPARATOR_CHAR

Lisez ceci:

• est-il possible de changer le séparateur d'id d'élément dans JSF?

J'ai eu le même problème avec les deux-points, et je n'ai pas pu les changer (je n'ai pas pu accéder au Code sortant les deux-points) et je voulais les récupérer avec des sélecteurs CSS3 avec jQuery.

Je l'ai mis ici, parce que cela pourrait être utile pour quelqu'un

input[id="something:something"] cela a bien fonctionné dans les sélecteurs jQuery, et cela peut aussi fonctionner dans les feuilles de style (peut avoir des problèmes de navigateur)

Je travaille dans un framework ADF et je dois souvent utiliser JQuery pour sélectionner des éléments. Ce format fonctionne pour moi. Cela fonctionne aussi dans IE8.

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);

J'ai trouvé que ce format fonctionnait pour moi pour IE7 (Firefox aussi), et j'utilise JSF / Icefaces 1.8.2.

Say form id=FFF, element id=EEE

var jq=jQuery.noConflict();
jq(document).ready(function() {
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib function options go here })
});