Handling a Colon in an Element Id in a CSS Selector

Handling a colon in an element ID in a CSS selector

Backslash:

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

• See also Using Namespaces with CSS (MSDN)

What does a colon mean within an HTML id attribute?

Colons are allowed inside ID attributes, but hold no special significance. It's not really advisable to use them because they can sometimes cause problems, such as when used with jQuery or CSS, where the colon has special meaning as a pseudo-selector.

Select elements by attributes with : (colon)

You need to escape the colon

document.querySelectorAll('[xml\\3A space]')

I used https://mothereff.in/css-escapes to get the code above :)

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

The : is a special character in CSS identifiers, it represents the start of a pseudo class selector like :hover, :first-child, etc. You would need to escape it.

#phoneForm\:phoneTable {
    background: pink;
}

This only doesn't work in IE6/7. If you'd like to support those users as well, use \3A instead (with a trailing space behind!)

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

Above works in all browsers.

---

There are several other ways to solve this:

1. Just wrap it in a plain HTML element and style via it instead.

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

   with

    #phoneField table {
        background: pink;
    }
   

   ---

   
   

2. Use class instead of id. E.g.

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

   with

    .pink {
        background: pink;
    }
   

   or

    table.pink {
        background: pink;
    }
   

   Additional advantage is that this allows much more abstraction freedom. The CSS is reusable on multiple elements without the need to add selectors and/or copypaste properties when you want to reuse the same properties on another element(s).

   ---

   
   

3. Since JSF 2.x only: change the JSF default UINamingContainer separator by the following context param in web.xml. E.g.

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

   So that the separator character becomes - instead of :.

    #phoneForm-phoneTable {
        background: pink;
    }
   

   Disadvantage is that you need to ensure that you don't use this character yourself anywhere in the ids and this is thus a very brittle approach. I do not recommend this approach. This is a bad practice.

   ---

   
   

4. Since JSF 1.2 only: disable prepending of the form id.

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

   so that you can use

    #phoneTable {
        background: pink;
    }
   

   Disadvantage is that <f:ajax> won't be able to find it and that it is considered poor practice: UIForm with prependId="false" breaks <f:ajax render>. I do not recommend this approach. This is a bad practice. Moreover, this attribute does not exist in all other UINamingContainer components, so you still have to deal with them the right way (#1 and/or #2 here above).

   ---

   
   

In your specific case, I think turning it into a CSS class as described in #2 is the most appropriate solution. A "phone table" namely doesn't seem to represent a website-wide unique element. Real website-wide unique elements such as header, menu, content, footer, etc are usually not wrapped in JSF forms or other JSF naming containers, so their IDs wouldn't be prefixed anyway.

See also:

• How to select JSF components using jQuery?
• By default, JSF generates unusable IDs, which are incompatible with the CSS part of web standards

Dealing with a colon in BeautifulSoup CSS selectors

Update: the issue is now fixed in BeautifulSoup 4.5.0, upgrade if needed:

pip install --upgrade beautifulsoup4

---

Old answer:

Created an issue at the BeautifulSoup issue tracker:

• Dealing with a colon in BeautifulSoup CSS selectors

Will update the answer in case of any updates in the launchpad issue.

Attribute selector containing a colon is not finding any elements

It's possible. You need to escape any special character with a \\

$('[foo\\:bar]').addClass("fooBar");

DOC:

To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must
be escaped with with two backslashes: \\. For example, an element with
id="foo.bar", can use the selector $("#foo\\.bar").

bypassing a colon in css

Use a forward slash to escape the colon after the namespace:

sf\:form > table {
    property: value;
}

Example:

http://jsfiddle.net/fZm28/

Reference:

http://msdn.microsoft.com/en-us/library/ms762307(VS.85).aspx

---

Related Topics