Gestion des deux-points dans un ID d'élément dans un sélecteur CSS
JSF définit l'ID d'un champ de saisie sur search_form:expression. J'ai besoin de spécifier un style sur cet élément, mais ce deux-points ressemble au début d'un pseudo-élément pour le navigateur afin qu'il soit marqué comme invalide et ignoré. Existe-t-il de toute façon pour échapper au colon ou quelque chose?
input#search_form:expression {
///...
}
Barre oblique inverse:
input#search_form\:expression { ///...}
- Voir aussi tilisation des espaces de noms avec CSS (MSDN)
L'utilisation d'une barre oblique inverse avant les deux-points ne fonctionne pas dans de nombreuses versions de IE (en particulier 6 et 7; éventuellement 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. Cela fait partie de la norme CSS2 .
Cet article vous expliquera 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 Edge) et le caractère deux-points pour que le sélecteur fonctionne correctement sur différents navigateurs.
Techniquement, le caractère deux-points peut être échappé par \:, mais cela ne fonctionne pas dans IE <8, vous devrez donc utiliser \3a:
#search\_form\3a expression {}
Vous pouvez y échapper avec une barre oblique inverse
input#search_form\:expression {
///...
}
À partir de CSS Spec
4.1.3 Caractères et cas
Les règles suivantes s'appliquent toujours:
Toutes les feuilles de style CSS ne respectent pas la casse, à l'exception des 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 police et des URI sort du cadre de cette spécification. Notez en particulier que les noms d'éléments ne respectent pas la casse en HTML, mais respectent la casse en XML. En CSS, les identificateurs (y compris les noms d'élément, les classes et les ID 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 tiret suivi d'un chiffre. Les identificateurs peuvent également contenir des caractères d'échappement et tout caractère ISO 10646 sous forme de code numérique (voir l'élément suivant). Par exemple, l'identifiant "B&W?" peut s'écrire "B\& W \?" ou "B\26 W\3F". Notez qu'Unicode est un code par code équivalent à ISO 10646 (voir [UNICODE] et [ISO10646]).
En CSS 2.1, un caractère backslash () indique trois types d'échappement de caractère. Tout d'abord, à l'intérieur d'une chaîne, une barre oblique inverse suivie d'une nouvelle ligne est ignorée (c'est-à-dire que la chaîne est réputée ne contenir ni la barre oblique inverse ni la nouvelle 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 pour supprimer sa signification spéciale. Par exemple, "\" "est une chaîne composée d'un guillemet double. 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 à barre oblique inverse 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ésentent le caractère ISO 10646 ([ISO10646]) avec ce numéro, qui ne doit pas être nul. (Il n'est pas défini dans CSS 2.1 ce qui se passe si une feuille de style contient un caractère avec le 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 faite clair. Il y a deux façons de procéder:
avec un espace (ou un autre caractère d'espacement): "\ 26 B" ("& B"). Dans ce cas, les agents utilisateurs doivent traiter une paire "CR/LF" (U + 000D/U + 000A) comme un seul espace blanc. en fournissant exactement 6 chiffres hexadécimaux: "\ 000026B" ("& B") En fait, ces deux méthodes peuvent être combinées. Un seul espace blanc est ignoré après un échappement hexadécimal. Notez que cela signifie qu'un espace "réel" 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 afficher un symbole visible, tel qu'un glyphe de "caractère manquant" (cf. 15.2, point 5).
Remarque: Les échappements barre oblique inversée, 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 fichier web.xml en tant que param-init de javax.faces.SEPARATOR_CHAR
Lis ça:
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 les sélecteurs CSS3 avec jQuery.
Je l'ai mis ici, car cela pourrait être utile pour quelqu'un
input[id="something:something"] a bien fonctionné dans les sélecteurs jQuery, et il peut également 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 également dans IE8.
$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);