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

StackOverflow https://stackoverflow.com/questions/122238

  •  02-07-2019
  •  | 
  •  

Question

    

Cette question a déjà une réponse ici:

         

JSF définit l'identifiant d'un champ de saisie sur search_form:expression. Je dois spécifier un style pour cet élément, mais ces deux points ressemblent au début d'un pseudo-élément du navigateur, de sorte qu'il est marqué comme non valide et ignoré. Y a-t-il un moyen d'échapper au côlon ou autre chose? 

input#search_form:expression {
  ///...
}
Était-ce utile?

La solution

barre oblique inverse: 

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

Autres conseils

L'utilisation d'une barre oblique inverse avant les deux points ne fonctionne pas dans de nombreuses versions d'IE (en particulier les versions 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 du Standard CSS2 .

Cet article vous expliquera comment échapper à tout caractère en CSS.

Maintenant, & # 8217; 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 au trait de soulignement (pour empêcher IE6 d’ignorer complètement la règle dans certains cas extrêmes) et au caractère deux-points pour que le sélecteur fonctionne correctement dans différents navigateurs.

Techniquement, le caractère deux-points peut être échappé comme \:, mais cela ne & # 8217; ne fonctionne pas dans IE < 8, de sorte que vous & # 8217; vous devrez utiliser \3a: 

#search\_form\3a expression {}

Vous pouvez y échapper avec une barre oblique inverse 

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

Extrait de la spéc. CSS

4.1.3 Caractères et majuscules

Les règles suivantes sont toujours valables:

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 & Quot; id & Quot; et " classe " ;, des noms de police et des URI ne relèvent pas de la portée de cette spécification. Notez en particulier que les noms d'éléments ne respectent pas la casse en HTML, mais sont sensibles à 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 ISO 10646 caractères U + 00A1 et supérieurs, ainsi que 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 identifiants peuvent également contenir des caractères d'échappement et tout caractère ISO 10646 sous forme de code numérique (voir élément suivant). Par exemple, l'identifiant & Quot; B & Amp; W? & Quot; peut être écrit comme " B \ & amp; W \? " ou " B \ 26 W \ 3F " ;. Notez que Unicode correspond code par code à ISO 10646 (voir [UNICODE] et [ISO10646]).

Dans CSS 2.1, un caractère barre oblique inversée () indique trois types d'échappement. Tout d’abord, dans une chaîne, une barre oblique inversée 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, cela annule la signification des caractères CSS spéciaux. Tout caractère (à l'exception d'un chiffre hexadécimal) peut être échappé avec une barre oblique inverse pour supprimer sa signification particulière. Par exemple, & "; \ &"; & "; est une chaîne composée d'une citation 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 barres obliques inverses permettent aux auteurs de faire référence à des caractères qu’ils ne peuvent pas facilement insérer dans un document. Dans ce cas, la barre oblique inverse est suivie d'au plus six chiffres hexadécimaux (0..9A..F), qui correspondent au caractère ISO 10646 ([ISO10646]) avec ce nombre, qui ne doit pas être égal à zéro. (Il n’est pas défini dans CSS 2.1 ce qui se passe si une feuille de style contient un caractère avec un point de code Unicode à zéro.) Si un caractère compris dans la plage [0-9a-f] suit le nombre hexadécimal, la fin du numéro doit être définie. clair. Il y a deux façons de le faire:

avec un espace (ou un autre caractère d'espacement): " \ 26 B " (" & amp; B "). Dans ce cas, les agents utilisateurs doivent traiter un & Quot; CR / LF & Quot; paire (U + 000D / U + 000A) sous la forme d’un seul caractère d’espace. en fournissant exactement 6 chiffres hexadécimaux: " \ 000026B " (" & amp; B ") En fait, ces deux méthodes peuvent être combinées. Un seul caractère d'espacement est ignoré après un échappement hexadécimal. Notez que cela signifie qu'un & Quot; vrai & Quot; l'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 de 10FFFF autorisé dans Unicode actuel), l'agent utilisateur peut remplacer l'échappement par le & caractère de remplacement " (U + FFFD). Si le caractère doit être affiché, l'agent utilisateur doit afficher un symbole visible, tel qu'un & "Caractère manquant &"; glyphe (cf. 15.2, point 5).

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

J'ai eu le même problème avec les deux points et je ne pouvais pas les modifier (je ne pouvais pas accéder au code qui produisait du code) et je voulais les récupérer avec des sélecteurs CSS3 avec jQuery.

Je le mets ici, car cela pourrait être utile à quelqu'un

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

Dans JSF 2.0, vous pouvez spécifier le séparateur à l'aide du fichier web.xml en tant qu'initial-param de javax.faces.SEPARATOR_CHAR

Lisez ceci:

Je travaille dans un cadre 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);

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 })
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top