So, I have a question about browser support with these types of selectors: [attribute=”value”]. In FF my desired result shows up: The styled elements respond with the appropriate background image. In Safari and Chrome, however, only the first background image is displayed. Here is the code:
nav#main li[data-id="first"] a{
background: url(../img/1nav.png) 0 100% no-repeat;
}
nav#main li[data-id="second"] a{
background: url(../img/2nav.png) 0 100% no-repeat;
}
nav#main li[data-id="third"] a{
background: url(../img/3nav.png) 0 100% no-repeat;
}
nav#main li[data-id="fourth"] a{
background: url(../img/4nav.png) 0 100% no-repeat;
}
So, in safari and chrome I’m only seeing 1nav.png as the bg image. Is there some some kind of a bug when it comes to this selector? Or am I using it incorrectly? Any help would be appreciated.
Thanks.
