¿Cómo usar el ID de elemento HTML generado por JSF con dos puntos “:” en los selectores de CSS?

Siéntete libre de divulgar nuestra página y códigos en tus redes, necesitamos tu ayuda para aumentar nuestra comunidad.

Solución:

El : es un carácter especial en los identificadores CSS, representa el comienzo de un selector de pseudoclase como :hover, :first-child, etc. Tendrías que escapar de él.

#phoneForm:phoneTable 
    background: pink;

Esto solo no funciona en IE6/7. Si desea apoyar a esos usuarios también, utilice 3A en cambio (¡con un espacio final detrás!)

#phoneForm3A phoneTable 
    background: pink;

Arriba funciona en todos los navegadores.

---

Hay varias otras formas de resolver esto:

1. Simplemente envuélvelo en un elemento HTML simple y dale estilo a través de él.

   con

    #phoneField table 
        background: pink;
    
   

   ---

2. Usar class en vez de id. P.ej

   con

    .pink 
        background: pink;
    
   

   o

    table.pink 
        background: pink;
    
   

   La ventaja adicional es que esto permite mucha más libertad de abstracción. El CSS se puede reutilizar en varios elementos sin necesidad de agregar selectores y/o copiar y pegar propiedades cuando desee reutilizar las mismas propiedades en otro(s) elemento(s).

   ---

3. Solo desde JSF 2.x: cambie el valor predeterminado de JSF UINamingContainer separador por el siguiente parámetro de contexto en web.xml. P.ej

    
        javax.faces.SEPARATOR_CHAR
        -
    
   

   De modo que el carácter separador se convierte en - en vez de :.

    #phoneForm-phoneTable 
        background: pink;
    
   

   La desventaja es que debe asegurarse de no usar este carácter usted mismo en ninguna parte de los identificadores y, por lo tanto, este es un enfoque muy frágil. hago no recomendar este enfoque. Esta es una mala práctica.

   ---

4. Solo desde JSF 1.2: deshabilite la anteposición del formulario id.

   para que puedas usar

    #phoneTable 
        background: pink;
    
   

   La desventaja es que no podrá encontrarlo y se considera una mala práctica: UIForm with prependId=”false”se rompe . hago no recomendar este enfoque. Esta es una mala práctica. Además, esto attribute no existe en todos los demás UINamingContainer componentes, por lo que todavía tiene que tratar con ellos de la manera correcta (#1 y/o #2 aquí arriba).

   ---

En tu caso específico, creo que convertirlo en una clase CSS como se describe en el n. ° 2 es la solución más adecuada. Una “mesa telefónica” no parece representar un elemento único en todo el sitio web. Los elementos únicos reales de todo el sitio web, como el encabezado, el menú, el contenido, el pie de página, etc., generalmente no están envueltos en formularios JSF u otros contenedores de nombres JSF, por lo que sus ID no tendrían un prefijo de todos modos.

Ver también:

• ¿Cómo seleccionar componentes JSF usando jQuery?
• De forma predeterminada, JSF genera ID inutilizables, que son incompatibles con la parte CSS de los estándares web.

valoraciones y reseñas

Acuérdate de que tienes la capacidad de decir si te ayudó.

---

---

Utiliza Nuestro Buscador