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>