Question

This needs to be cross-browser compatible at least with IE 7/8 and the other major, current browsers.

I have the following (simplified) HTML:

<div id="facebook">
    <fb:like ...... />
    <fb:comments>
        <iframe .... />
    </fb:comments>
</div>

The IFRAME is added by Facebook but I need to make a display modification to it. How can I use CSS selectors to select “the first IFRAME within the second FB tag under the div with an ID of facebook”? I need to add height and overflow CSS attributes to the IFRAME.

If this is not possible with CSS in a cross-browser compatible fashion, what would the approptiate jQuery selector be? Might help to have both anyways if someone wants to answer both scenarios but my preference is for CSS.

Thanks.

Answer 1

Those are not fb elements, they are like and comment elements in the fb XML namespace.

The W3C way to do all this is to declare the namespace in your stylesheet and use special selector syntax with it as shown in this answer. But as you’d expect, IE has no idea what I’m talking about, so as an alternative you can treat the namespace as part of the element name, resulting in fb:like and fb:comment instead. Since : is a special character in CSS selectors (pseudo-classes and pseudo-elements), you simply escape it with a backslash for it to be seen literally.

This CSS selector should work in IE7+ and other browsers:

#facebook fb\:comments iframe:first-child {
    /* Styles */
}

jQuery does not currently implement namespaces in its selector engine, so you can drop that selector right in if you need to use it for scripting.