CSS属性と擬似要素セレクタを結合しますか？

Question

擬似要素セレクタ（:after）と属性セレクタ（[title]）を組み合わせるにはどうすればよいですか？

div[title]:afterを使ってみましたが、これは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"; 
} 

デモ：http://jsfiddle.net/jmAX6/

それは私の "YES" これらのdivのそれぞれの終わりを示し、それはNO」示す必要があります"2番目のdivの後に。

私はChrome 17.0.963.38を実行しています。 Safari 5.1.2では正常に動作するようです。

Answer 1

これは最終的にreportedだったバグのようです。あなたは少なくとも一つの宣言で、あなたのスタイルシート内の任意の場所にdiv[title]のためのCSSルールを追加する場合は、あなたのdiv[title]:afterルールが魔法のように適用されます。例：

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

the updated fiddleを参照してください。

また、あなたの第二divが持つ以下のコメントに示すように、特定のHTML属性を持っていないとは何かを持っているようです。 http://jsfiddle.net/jmAX6/6/魔法はそれを動作させていないタイトルでのdivにクラスを追加：