सीएसएस विशेषता और छद्म-तत्व चयनकर्ताओं को संयोजित करें?

Question

मैं एक विशेषता चयनकर्ता ([title]) के साथ एक छद्म-तत्व चयनकर्ता (:after) कैसे जोड़ सकता हूं?

मैंने div[title]:after का उपयोग करने का प्रयास किया, लेकिन यह क्रोम में काम नहीं करता है।

HTML:

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

सीएसएस:

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

डेमो: http://jsfiddle.net/jmAX6/

यह मेरे "हाँ" उन div के में से प्रत्येक के अंत में पता चलता है, जब यह "दिखाना चाहिए नहीं "दूसरे div के बाद।

मैं क्रोम 17.0.963.38 चला रहा हूं। ऐसा लगता है कि सफारी 5.1.2 में ठीक काम करता है।

Answer 1

यह एक बग जैसा दिखता है, जो अंततः reported रहा है। यदि आप कम से कम एक घोषणा के साथ div[title]कहीं भी के लिए अपने स्टाइलशीट में कोई सीएसएस नियम जोड़ते हैं, तो आपके div[title]:after नियम जादुई रूप से लागू होंगे। उदाहरण के लिए:

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

the updated fiddle देखें।

ऐसा लगता है कि नीचे दिए गए टिप्पणियों में दिखाए गए अनुसार आपके दूसरे div में कुछ HTML विशेषताएँ हैं या नहीं।