usar - selectores css

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

Question

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

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

Traté de establecer CSS a través de #phoneTable { ... } , sin embargo, no funciona. Tras la inspección de la fuente HTML en el lado del cliente, parece que la tabla HTML generada por JSF obtiene una ID de cliente en forma de 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?

Answer 1

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

#phoneForm/:phoneTable {
background: pink;
}

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

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

Arriba funciona en todos los navegadores.

Hay varias otras formas de resolver esto:

1. Simplemente envuélvela en un elemento y estilo HTML sencillo a través de ella.

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

   con

   #phoneField table {
   background: pink;
   }

2. Usa class 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 propiedades de copia cuando desee reutilizar las mismas propiedades en otro elemento (s).

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

   <context-param>
   <param-name>javax.faces.SEPARATOR_CHAR</param-name>
   <param-value>-</param-value>
   </context-param>

   Para que el carácter separador se convierta en - lugar de :

   #phoneForm-phoneTable {
   background: pink;
   }

   La desventaja es que debe asegurarse de no utilizar este personaje en ninguna parte de los identificadores, y este es un enfoque muy frágil.

4. Solo desde JSF 1.2: inhabilitar el anteponer del id formulario.

   <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> . Este atributo no existe en todos los otros componentes de UINamingContainer , por lo que aún debe lidiar con ellos de la manera correcta (# 1 y / o # 2 aquí arriba).

En su caso específico, creo que convertirlo en una clase de CSS como se describe en el n. ° 2 es la solución más adecuada. Una "tabla telefónica" 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 envueltos 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 identificadores inutilizables, que son incompatibles con css parte de los estándares web

Answer 2

<h:form prependId="false">

No funciona si estás usando un

<h:commandButton>
tag