Handling a colon in an element ID in a CSS selector [duplicate]

Question

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 1

Backslash:

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

• See also Using Namespaces with CSS (MSDN)

Answer 2

Using a backslash before the colon doesn't work in many versions of IE (particularly 6 and 7; possibly others).

A workaround is to use the hexadecimal code for the colon - which is \3A

example:

input#search_form\3A expression {  }

This works in all browsers: Including IE6+ (and possibly earlier?), Firefox, Chrome, Opera, etc. It's part of the CSS2 standard.

Answer 3

This article will tell you how to escape any character in CSS.

Now, there’s even a tool for it: http://mothereff.in/css-escapes#0search%5fform%3Aexpression

TL;DR All the other answers to this question are incorrect. You need to escape both the underscore (to prevent IE6 from ignoring the rule altogether in some edge cases) and the colon character for the selector to work properly across different browsers.

Technically, the colon character can be escaped as \:, but that doesn’t work in IE < 8, so you’ll have to use \3a:

#search\_form\3a expression {}

Answer 4

You can escape it with a backslash

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

From the CSS Spec

4.1.3 Characters and case

The following rules always hold:

All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML. In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).

In CSS 2.1, a backslash () character indicates three types of character escapes. First, inside a string, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline).

Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit) can be escaped with a backslash to remove its special meaning. For example, "\"" is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning.

Third, backslash escapes allow authors to refer to characters they can't easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-f] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:

with a space (or other whitespace character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single whitespace character. by providing exactly 6 hexadecimal digits: "\000026B" ("&B") In fact, these two methods may be combined. Only one whitespace character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must itself either be escaped or doubled.

If the number is outside the range allowed by Unicode (e.g., "\110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5).

Note: Backslash escapes, where allowed, are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not). The identifier "te\st" is exactly the same identifier as "test".

Answer 5

I had the same problem with colons, and I was unable to change them (couldn't access the code outputing colons) and I wanted to fetch them with CSS3 selectors with jQuery.

I put it here, cause it might be helpful for someone

input[id="something:something"] worked fine in jQuery selectors, and it might work in stylesheets as well (might have browser issues)

Answer 6

In JSF 2,0, you can specify the separator using the web.xml file as init-param of javax.faces.SEPARATOR_CHAR

Read this:

• Is it possible to change the element id separator in JSF?

Answer 7

I work in a ADF framework and I often times have to use JQuery to select elements. This format works for me. This works in IE8 also.

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);

Answer 8

I found only this format worked for me for IE7 (Firefox too), and I use JSF/Icefaces 1.8.2.

Say form id=FFF, element id=EEE

var jq=jQuery.noConflict();
jq(document).ready(function() {
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib function options go here })
});