Comment utiliser L'ID D'élément HTML généré par JSF avec deux points ": "dans les sélecteurs CSS?

le : est un caractère spécial dans les identificateurs CSS, Il représente le début d'un pseudo sélecteur de classe comme :hover , :first-child , etc. Vous auriez besoin d'y échapper.

#phoneForm\:phoneTable {
    background: pink;
}

cela ne fonctionne que dans IE6/7. Si vous souhaitez prendre en charge ces utilisateurs, utilisez A à la place (avec un espace derrière!)

#phoneFormA phoneTable {
    background: pink;
}

ci-Dessus fonctionne dans tous les navigateurs.

il y a plusieurs autres façons de résoudre ce problème:

1. " il suffit de l'envelopper dans un élément HTML simple et le style via elle à la place.

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

   avec

   #phoneField table {
       background: pink;
   }
   

   ---

2. utiliser class au lieu de id . Par exemple:

   <h:dataTable id="phoneTable" styleClass="pink">
   

   avec

   .pink {
       background: pink;
   }
   

   ou

   table.pink {
       background: pink;
   }
   

   l'avantage supplémentaire est que cela permet beaucoup plus de liberté d'abstraction. Le CSS est réutilisable sur plusieurs éléments sans qu'il soit nécessaire d'ajouter des sélecteurs et/ou des propriétés copypaste lorsque vous voulez réutiliser les mêmes propriétés sur un ou plusieurs autres éléments.

   ---

3. depuis JSF 2.x seulement: changez le séparateur par défaut de JSF UINamingContainer par le paramètre de contexte suivant dans web.xml . E. g.

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

   de sorte que le caractère du séparateur devient - au lieu de : .

   #phoneForm-phoneTable {
       background: pink;
   }
   

   L'inconvénient est que vous devez vous assurer que vous n'utilisez pas ce caractère vous-même n'importe où dans l'ids et c'est donc une approche très fragile.

   ---

4. depuis JSF 1.2 seulement: désactivation de la préprogrammation du formulaire id .

   <h:form prependId="false">
       <h:dataTable id="phoneTable">
   

   pour que vous puissiez utiliser

   #phoneTable {
       background: pink;
   }
   

   désavantage est que <f:ajax> ne sera pas en mesure de le trouver et qu'il est considéré comme une mauvaise pratique: Uiiforme avec prependId=" false "breaks . Cet attribut n'existe pas dans tous les autres UINamingContainer composants, vous devez traiter avec eux de la bonne façon (#1 et #2 ci-dessus).

   ---

Dans votre cas spécifique, je pense que le transformer en une classe CSS comme décrit dans #2 est la solution la plus appropriée. Une" table téléphonique " à savoir ne semble pas représenter un élément unique à l'échelle du site web. Les éléments uniques à l'échelle du site Web tels que l'en-tête, le menu, le contenu, le pied de page, etc. ne sont généralement pas emballés dans des formulaires JSF ou d'autres conteneurs de désignation JSF, de sorte que leurs ID ne seraient pas préfixés de toute façon.

voir aussi:

• comment sélectionner les composants JSF en utilisant jQuery?
• par défaut, JSF génère des identifiants inutilisables, qui sont incompatibles avec la partie css des standards web