Manejo de dos puntos en un ID de elemento en un selector CSS [duplicado]

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

  •  02-07-2019
  •  | 
  •  

Pregunta

Esta pregunta ya tiene respuesta aquí:

JSF está configurando el ID de un campo de entrada en search_form:expression.Necesito especificar algún estilo en ese elemento, pero esos dos puntos parecen el comienzo de un pseudoelemento para el navegador, por lo que se marca como no válido y se ignora.¿Hay alguna forma de escapar del colon o algo así?

input#search_form:expression {
  ///...
}
¿Fue útil?

Solución

Barra invertida: 

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

Otros consejos

El uso de una barra invertida antes de los dos puntos no funciona en muchas versiones de IE (particularmente 6 y 7;posiblemente otros).

Una solución alternativa es utilizar el código hexadecimal para los dos puntos, que es \3A

ejemplo:

input#search_form\3A expression {  }

Esto funciona en todos los navegadores:Incluyendo IE6+ (¿y posiblemente antes?), Firefox, Chrome, Opera, etc.es parte del estándar CSS2.

Este artículo le dirá cómo escapar de cualquier carácter en CSS.

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

TL;DR Todas las demás respuestas a esta pregunta son incorrectas.Debe omitir 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 eso no funciona en IE < 8, por lo que tendrás que usar \3a:

#search\_form\3a expression {}

Puedes escapar de él con una barra invertida.

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

Desde el Especificaciones CSS

4.1.3 Personajes y caso

Siempre se cumplen las siguientes reglas:

Todas las hojas de estilo CSS no distinguen entre mayúsculas y minúsculas, excepto las partes que no están bajo el control de CSS.Por ejemplo, la distinción entre mayúsculas y minúsculas de los valores de los atributos HTML "id" y "class", de los nombres de fuentes y de los 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 sí en XML.En CSS, los identificadores (incluidos los nombres de elementos, las clases y los ID en los selectores) pueden contener solo los caracteres [a-z0-9] y los caracteres ISO 10646 U+00A1 y superiores, además del guión (-) y el guión bajo (_). ;no pueden comenzar con un dígito ni con un guión seguido de un dígito.Los identificadores también pueden contener caracteres de escape y cualquier carácter ISO 10646 como código numérico (consulte el siguiente elemento).Por ejemplo, el identificador "B&W?" puede escribirse como "b & w ?" o "B 26 W 3f".Tenga en cuenta que Unicode es equivalente código por código a ISO 10646 (consulte [UNICODE] e [ISO10646]).

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

En segundo lugar, cancela el significado de los caracteres CSS especiales.Cualquier carácter (excepto un dígito hexadecimal) puede tener como carácter de escape una barra invertida para eliminar su significado especial.Por ejemplo, "\"" es una cadena que consta de una comilla doble.Los preprocesadores de hojas de estilo no deben eliminar estas barras invertidas de una hoja de estilo, ya que eso cambiaría el significado de la hoja de estilo.

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

con un espacio (u otro carácter de espacio en blanco):"\26B" ("&B").En este caso, los agentes de usuario deben tratar un par "CR/LF" (U+000D/U+000A) como un único carácter de espacio en blanco.proporcionando exactamente 6 dígitos hexadecimales:" 000026b" ("& b") De hecho, estos dos métodos pueden combinarse.Sólo 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 máximo 10FFFF permitido en Unicode actual), la UA puede reemplazar el escape con el "carácter de reemplazo" (U+FFFD).Si se va a mostrar el carácter, la UA debe mostrar un símbolo visible, como un glifo de "carácter faltante" (cf.15.2, punto 5).

Nota:Los escapes de barra invertida, cuando están permitidos, siempre se consideran parte de un identificador o una cadena (es decir, "\7B" no es puntuación, aunque "{" sí lo es y "\32" está permitido al comienzo de un nombre de clase). , aunque "2" no lo es).El identificador "te\st" es exactamente el mismo identificador que "test".

Tuve el mismo problema con los dos puntos y no pude cambiarlos (no pude acceder al código que genera los dos puntos) y quería recuperarlos con selectores CSS3 con jQuery.

Lo pongo aquí porque a alguien le puede servir.

input[id="something:something"] funcionó bien en los selectores de jQuery y podría funcionar también en hojas de estilo (puede tener problemas con el navegador)

En JSF 2.0, puede especificar el separador utilizando el archivo web.xml como parámetro de inicio de javax.faces.SEPARATOR_CHAR

Lee esto:

Trabajo en un marco ADF y muchas veces tengo que usar JQuery para seleccionar elementos.Este formato me funciona.Esto también funciona en IE8.

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

Descubrí que solo este formato me funciona para IE7 (también Firefox), y uso 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 })
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top