Manejo de dos puntos en un elemento ID en un selector de CSS

Question

JSF está configurando el ID de un campo de entrada en search_form:expression. Necesito especificar un poco de estilo en ese elemento, pero ese punto se parece al comienzo de un pseudo-elemento para el navegador, por lo que se marca como no válido e ignorado. ¿Hay alguna forma de escapar del colon o algo así?

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

Answer 1

Backslash:

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

• Véase también Using Namespaces with CSS (MSDN)

Answer 2

se puede escapar con una barra invertida

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

De los CSS Spec

4.1.3 Caracteres y caso

Las siguientes reglas siempre sostienen:

Todas las hojas de estilo CSS son sensibles a mayúsculas, excepto para las partes que no están bajo el control de CSS . Por ejemplo, la sensibilidad a mayúsculas y minúsculas de los valores de los atributos HTML "id" y "clase", de nombres de fuentes y de URI queda fuera del alcance de esta especificación. Tenga en cuenta en particular que los nombres de los elementos no distinguen entre mayúsculas y minúsculas en HTML, pero distingue entre mayúsculas y minúsculas en XML. En CSS, los identificadores (incluidos nombres de elementos, clases e ID en selectores) pueden contener solo los caracteres [a-z0-9] e ISO 10646 caracteres U + 00A1 y superiores, más el guión (-) y el guión bajo (_); no pueden comenzar con un dígito, o un guión seguido de un dígito. Los identificadores también pueden contener caracteres escapados y cualquier carácter ISO 10646 como un código numérico (consulte el siguiente elemento). Por ejemplo, el identificador "B & W?" se puede escribir como "B \ & W \?" o "B \ 26 W \ 3F". Tenga en cuenta que Unicode es código por código equivalente a ISO 10646 (vea [UNICODE] y [ISO10646]).

En CSS 2.1, un carácter de barra diagonal inversa() indica tres tipos de caracteres que se escapan. Primero, dentro de una cadena, se ignora una barra invertida seguida de una línea nueva (es decir, se considera que la cadena no contiene ni la barra diagonal inversa ni la línea nueva).

En segundo lugar, cancela el significado de caracteres CSS especiales. Cualquier carácter (excepto un dígito hexadecimal) se puede escapar con una barra invertida para eliminar su significado especial. Por ejemplo, "\"" es una cadena que consiste en una doble cita. Preprocesadores de hojas de estilo no debe quitar estas barras invertidas de una hoja de estilo, ya que iba a cambiar el significado de la hoja de estilo.

En tercer lugar, se escapa de barra invertida permiten a los autores se refieren a caracteres que no pueden colocarse fácilmente en un documento. En este caso, la barra invertida es seguida por un máximo de seis dígitos hexadecimales (0..9A..F), que representan el carácter ISO 10646 ([ISO10646]) con ese número , que no debe ser cero. (No está definido en CSS 2.1 qué sucede si una hoja de estilo contiene un carácter con código cero Unicode.) Si un carácter en el rango [0-9a-f] sigue el número hexadecimal, el final del número debe aclararse. Hay dos formas de hacerlo:

con un espacio (u otro carácter itespace): "\ 26 B" ("& B"). En este caso, los agentes de usuario deberían tratar un par "CR/LF" (U + 000D/U + 000A) como un solo carácter de espacio en blanco. proporcionando exactamente 6 dígitos hexadecimales: "\ 000026B" ("& B") De hecho, estos dos métodos se pueden combinar. Solo se ignora un carácter de espacio en blanco después de un escape hexadecimal. Tenga en cuenta que esto significa que un espacio "real" después de la secuencia de escape debe escaparse o duplicarse.

Si el número está fuera del rango permitido por Unicode (por ejemplo, "\ 110000" está por encima del 10FFFF máximo permitido en Unicode actual), el UA puede reemplazar el escape con el "carácter de reemplazo" (U + FFFD). Si se va a mostrar el carácter, el UA debería mostrar un símbolo visible, como un glifo de "carácter faltante" (véase 15.2, punto 5).

Nota: Las escapatorias invertidas, siempre que estén permitidas, siempre se consideran parte de un identificador o cadena (es decir, "\ 7B" no es puntuación, aunque "{" es, y "\ 32" está permitido en el comienzo de un nombre de clase, aunque "2" no lo es). El identificador "te \ st" es exactamente el mismo identificador que "prueba".

Answer 3

El uso de una barra diagonal inversa antes del punto no funciona en muchas versiones de IE (particularmente 6 y 7, posiblemente otras).

Una solución consiste en utilizar el código hexadecimal para el colon - que está \ 3A

ejemplo: (¿y posiblemente anterior):

input#search_form\3A expression { } 

Esto funciona en todos los navegadores Incluyendo IE6 +, Firefox, Chrome, Opera, etc. Es parte de CSS2 standard.

Answer 4

Tuve el mismo problema con dos puntos, y no pude cambiarlos (no pude acceder al código que arroja dos puntos) y quise buscarlos con los selectores de CSS3 con jQuery.

lo puse aquí, la causa podría ser útil para alguien

input[id="something:something"] funcionó bien en los selectores de jQuery, y podría trabajar en hojas de estilo, así (que podría tener problemas con el navegador)

Answer 5

En JSF 2, 0, puede especificar el separador con el archivo web.xml como init-param de javax.faces.SEPARATOR_CHAR

Lea esto:

• Is it possible to change the element id separator in JSF?

Answer 6

sólo encontré este formato que funcionó para mí para IE7 (Firefox también), y uso de 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 }) 
}); 

Answer 7

This article le dirá cómo escapar cualquier carácter en el CSS.

Ahora, hay incluso una herramienta para ello: http://mothereff.in/css-escapes#0search%5fform%3Aexpression

TL; DR Todas las demás respuestas a esta pregunta son incorrectos. Debe evitar tanto el guión bajo (para evitar que IE6 ignore la regla por completo en algunos casos extremos) como el carácter de dos puntos para que el selector funcione correctamente en diferentes navegadores.

Técnicamente, el carácter de dos puntos se puede escapar como \:, pero que no funciona en IE < 8, por lo que tendrá que utilizar \3a:

#search\_form\3a expression {} 

Answer 8

Yo trabajo en un marco de ADF y yo muchas veces tiene que usar JQuery para seleccionar elementos. Este formato funciona para mí. Esto también funciona en IE8.

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