google chrome - Combine CSS Attribute and Pseudo-Element Selectors?

Question

How can I combine a pseudo-element selector (:after) with an attribute selector ([title])?

I tried using div[title]:after, but this doesn't work in Chrome.

HTML:

<div title="foo">This div has a title.</div>
<div>This div does not have a title.</div>

CSS:

div:after {
    content: "NO";
}
div[title]:after {
    content: "YES";
}

Demo: http://jsfiddle.net/jmAX6/

It shows me "YES" at the end of each of those div's, when it should show "NO" after the second div.

I'm running Chrome 17.0.963.38. It seems to work fine in Safari 5.1.2.

Answer 1

This looks like a bug, which has finally been reported. If you add a CSS rule for div[title] anywhere in your stylesheet with at least one declaration, your div[title]:after rule will magically apply. For example:

div:after {
    content: "NO";
}
div[title] {
    display: block;
}
div[title]:after {
    content: "YES";
}

See the updated fiddle.

It also seems to have something to do with your second div having or not having certain HTML attributes, as shown in the comments below.