Handling a colon in an element ID in a CSS selector

css jsf css-selectors
sblundy picture sblundy · Sep 23, 2008 · Viewed 52.9k times · Source

JSF is setting the ID of an input field to search_form:expression. I need to specify some styling on that element, but that colon looks like the beginning of a pseudo-element to the browser so it gets marked invalid and ignored. Is there anyway to escape the colon or something?

input#search_form:expression {
  ///...
}

Answer

Mark Cidade picture Mark Cidade · Sep 23, 2008

Backslash: 

input#search_form\:expression {  ///...}

Related questions

How to use JSF generated HTML element ID with colon ":" in CSS selectors?

I've been working with a simple Java EE project using JSF. <h:form id="phoneForm"> <h:dataTable id="phoneTable"> </h:dataTable> </h:form> I tried to set CSS via #phoneTable { ... }, however it …

Read More
How to remove border from specific PrimeFaces p:panelGrid?

I have difficulty in removing border from a specific PrimeFaces <p:panelGrid>. <p:panelGrid styleClass="companyHeaderGrid"> <p:row> <p:column> Some tags </p:column> <p:column> Some tags &…

Read More
How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?

I'm using PrimeFaces 3.0-M3 and I have a <p:dataTable> with two columns in it. I want the first column to be fixed at a width of 20px. The other column can use whatever space is left over. …

Read More