title: How to use JSF generated HTML element ID with colon ":" in CSS selectors?
body: <p>I've been working with a simple Java EE project using JSF. </p>
  
  <pre><code>&lt;h:form id="phoneForm"&gt;
      &lt;h:dataTable id="phoneTable"&gt;
  
      &lt;/h:dataTable&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>I tried to set CSS via <code>#phoneTable { ... }</code>, however it doesn't work. Upon inspection of the HTML source in client side, it appears that 
  the JSF-generated HTML table gets a client ID in form of <code>id="phoneForm:phoneTable"</code>. I can't apply CSS via <code>#phoneForm:phoneTable { ... }</code>, because the colon indicates the start of a pseudoselector and causes an error.</p>
  
  <p>How can I use it anyway in CSS selectors?</p>