9

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.

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
Senseful
  • 73,679
  • 56
  • 267
  • 405

1 Answers1

11

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.

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
  • 1
    Yeah looks like a bug, check this one out: http://jsfiddle.net/jmAX6/6/ Adding a class to the div with no title magically makes it work. – Wesley Murch Jan 24 '12 at 14:23
  • 1
    @Madmartigan: I'm finding a few other related bugs too. Now filing a report just seems like a chore. I'll do it later if I remember to. – BoltClock Jan 24 '12 at 14:31
  • 2
    Looks like it's also dependent on the attribute used, so this definitely has to be a bug: http://jsfiddle.net/jmAX6/7/ Also check out the one with `tabindex`, when you tab into it, the pseudo element corrects itself. – Wesley Murch Jan 24 '12 at 14:33
  • @Madmartigan: Made me smirk :) – BoltClock Jan 24 '12 at 14:37