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

Resuelto Dzung Nguyen asked hace 13 años • 2 respuestas

He estado trabajando con un proyecto Java EE simple usando JSF.

<h:form id="phoneForm">
    <h:dataTable id="phoneTable">

    </h:dataTable>
</h:form>

Intenté configurar CSS a través de #phoneTable { ... }, pero no funciona. Tras inspeccionar el código fuente HTML en el lado del cliente, parece que la tabla HTML generada por JSF obtiene un ID de cliente en formato id="phoneForm:phoneTable". No puedo aplicar CSS a través de #phoneForm:phoneTable { ... }, porque los dos puntos indican el inicio de un pseudoselector y provoca un error.

¿Cómo puedo usarlo de todos modos en los selectores de CSS?

May 04 '11 11:05 Dzung Nguyen

Aceptado

Es :un carácter especial en los identificadores CSS, representa el inicio de un selector de pseudoclase como :hover, :first-childetc. Deberías escapar de él.

#phoneForm\:phoneTable {
    background: pink;
}

Esto sólo no funciona en IE6/7. Si también desea apoyar a esos usuarios, utilice \3Aen su lugar (¡con un espacio al final detrás!)

#phoneForm\3A phoneTable {
    background: pink;
}

Lo anterior funciona en todos los navegadores.

Hay varias otras formas de resolver esto:

Simplemente envuélvalo en un elemento HTML simple y aplique estilo a través de él.

 <h:form id="phoneForm">
     <div id="phoneField">
         <h:dataTable id="phoneTable">

con

 #phoneField table {
     background: pink;
 }

Usar classen lugar de id. P.ej
```
 <h:dataTable id="phoneTable" styleClass="pink">
```
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 es reutilizable en múltiples elementos sin la necesidad de agregar selectores y/o copiar y pegar propiedades cuando desee reutilizar las mismas propiedades en otro(s) elemento(s).
Solo desde JSF 2.x: cambie el UINamingContainerseparador predeterminado de JSF por el siguiente parámetro de contexto en web.xml. P.ej
```
 <context-param>
     <param-name>javax.faces.SEPARATOR_CHAR</param-name>
     <param-value>-</param-value>
 </context-param>
```
De modo que el carácter separador se convierta -en lugar de :.
```
 #phoneForm-phoneTable {
     background: pink;
 }
```
La desventaja es que debes asegurarte de no utilizar este personaje en ninguna parte de los identificadores y, por lo tanto, este es un enfoque muy frágil. No recomiendo este enfoque. Esta es una mala práctica.
Solo desde JSF 1.2: deshabilite el antepuesto del formulario id.
```
 <h:form prependId="false">
     <h:dataTable id="phoneTable">
```
para que puedas usar
```
 #phoneTable {
     background: pink;
 }
```
La desventaja es que <f:ajax>no podrá encontrarlo y que se considera una mala práctica: UIForm con prependId="false" rompe <f:ajax render> . No recomiendo este enfoque. Esta es una mala práctica. Además, este atributo no existe en todos los demás UINamingContainercomponentes, por lo que aún debe tratarlos de la manera correcta (n.° 1 y/o n.° 2 aquí arriba).

En su caso específico, creo que convertirlo en una clase CSS como se describe en el punto 2 es la solución más adecuada. Una "mesa telefónica", concretamente, no parece representar un elemento único en todo el sitio web. Los elementos únicos reales de todo el sitio web, como encabezado, menú, contenido, pie de página, etc., generalmente no están incluidos en formularios JSF u otros contenedores de nombres JSF, por lo que sus ID no tendrán 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.

May 04 '2011 11:05 BalusC