The CSS Selector for an Element That Its Id Is in The "Foo:Bar" Form

The CSS selector for an element that its id is in the foo:bar form

According to the W3c spec linked to in this answer, using colons in element IDs is plain wrong if used unescaped.

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".

Is the JSF framework really outputting those IDs in the final rendered HTML?

CSS selector for foo that contains bar?

To select all OBJECT containing PARAM, in CSS:

OBJECT:has(PARAM)

To select all OBJECT having a direct child PARAM, in CSS:

OBJECT:has(> PARAM)

No, what you are looking for would be called a parent selector. CSS has none; they have been proposed multiple times but I know of no existing or forthcoming standard including them. You are correct that you would need to use something like jQuery or use additional class annotations to achieve the effect you want.

Here are some similar questions with similar results:

• Is there a CSS parent selector?
• CSS Parent/Ancestor Selector
• Complex CSS selector for parent of active child

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

I can't find any documentation on this CSS selector.. what is it?

#foo.bar refers to the element with together foo id and bar class.

$('#foo.bar').fadeOut('slow');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id='foo' class='bar'>box</div>

.element .symbol {}

<div class="element">
    <div class="symbol" />
</div>

<div class="element large">
    <div class="symbol" />
</div>

.element, .symbol {}

$('').on('click', function(e) {  if (e.currentTarget.id === 'foo') {    console.log('foo clicked');  } else {    console.log('bar clicked');  }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="click" id="foo">foo</div><div class="click" id="bar">bar</div>

div[id^="player_"]

$('#SearchBag\\.CompanyName');

html body form div#adatum input#angebotsdatum value
                                             ^^^^^^ - this isn't valid

div#adatum > input[value="2014-02-22"]

->element_exists('input[value="2014-02-22"]', '...');