Chrome and CSS attribute selector

Question

I have the following HTML code, where I would like to format with css a data format (coming from xml) which can't be changed.

I have to give different styles to elements with different attribute value. I thought to use the CSS attribute selector.

body {
    background-color: black
}
s {
    text-decoration: none
}
f {
    color: black;
    text-decoration: none;
    display: block;
}
f[type=h2] {
    color: green
}
f[type=p] {
    color: blue
}
f[type=speech] {
    color: yellow
}
f[type=other] {
    color: gray
}

<b>
  <s> 
    <f type="h2">Title</f>
    <f type="p">Paragraph</f>
    <f type="speech">Dialgoue</f>
    <f type="other" br="true">Other</f>
    <f type="p">Paragraph</f>
    <f type="p">Paragraph</f>
  </s>
</b>

In Firefox the page is rendered as I expect ( h2 in green, p in blue, speech in yelllow and other in gray). In chrome everything is green.

How can I obtain the Firefox result in Chrome?

Answer 1

Changing attr name will help you , andi have no idea why

        <f custom="p">Paragraph</f>
        <f custom="speech">Dialgoue</f>
        <f custom="other" br="true">Other</f>
        <f custom="p">Paragraph</f>
        <f custom="p">Paragraph</f>


   <style type="text/css">
        f[custom=h2] {
            color: green;
        }
        f[custom=p] {
            color: blue;
        }
        f[custom=speech] {
            color: yellow;
        }
        f[custom=other] {
            color: gray;
        }
    </style>

Answer 2

Your HTML is not valid. If you run it through a validator it spits out errors because it doesn't like the named embedded XML tags.

According to the HTML/XML Task Force Report :

When an HTML5 parser encounters unfamiliar markup, it assumes that such markup is an erroneous attempt to generate well-defined HTML5. Consequently, it applies error correction strategies which result in a DOM representation that can differ radically from the DOM that an XML parser would have produced. In particular, open elements may end prematurely and additional elements may be opened.

The practical result is that a “naked” XML island in an HTML5 document will not reliably produce anything that resembles the DOM one would expect from casual inspection of the XML island.

So Chrome is well within its rights to screw up here, 'cause technically you did it first. Of note is how (in my Chrome browser) all the elements are green ( http://jsfiddle.net/qJMWg/ ) - which suggests that for some reason that all thing they're nested in a big <f type="h2"> element. That is of note because HTML does contains a <b> and <s> tag, so <f> is the first invalid one it encounters.

If we change the styles for that f\\[type=h2\\] rule ( http://jsfiddle.net/qJMWg/1/ ) it affects everything - which is consistent with the idea that somehow Chrome is interpreting this XML structure incorrectly. To Chrome's CSS engine (despite what the developer tools is telling us) this somehow looks like this:

    <b>
      <s> 
        <f type="h2">Title&lt;/f&gt;
        &lt;f type="p"&gt;Paragraph&lt;/f&gt;
        &lt;f type="speech"&gt;Dialgoue&lt;/f&gt;
        &lt;f type="other" br="true"&gt;Other&lt;/f&gt;
        &lt;f type="p"&gt;Paragraph&lt;/f&gt;
        &lt;f type="p"&gt;Paragraph</f>
      </s>
    </b>

Answer 3

For some unknown reason, Chrome is rather strict on HTML tags thus the CSS rule won't work well in the said browser.

A suggestion though, why don't you style the XML instead?