Similar Issue:
Combine CSS Attribute and Pseudo-Element Selectors?
In my testing, I found that in Firefox and Opera everything works fine, but Chrome, Safari, and Mobile Safari are ignoring the second pseudo element css rule and defaulting to the first. Can someone explain why this is happening?
Is there a way to achieve the desired result without adding classes or ids to the elements?
SOLUTION:
It turns out that this issue is related to a bug in Webkit browsers. The fix is quite simple - just add any CSS rule involving only the non-pseudo element, like this:
#test-div a[href*="tel"],
#test-div a[href*="mail"] { display:block; }
Isn't it odd how this workaround fixes the problem?
Here's the updated (working) fiddle: http://jsfiddle.net/BC3Td/3/