pseudo - selectores css

¿Combina el atributo de CSS y los selectores de pseudo-elemento?

Question

¿Cómo puedo combinar un selector de pseudo-elemento ( :after ) con un selector de atributo ( [title] )?

Intenté usar div[title]:after , pero esto no funciona en 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";
}

Demostración: http://jsfiddle.net/jmAX6/

Me muestra "SÍ" al final de cada uno de esos div, cuando debería mostrar "NO" después del segundo div.

Estoy ejecutando Chrome 17.0.963.38. Parece funcionar bien en Safari 5.1.2.

Answer 1

Esto parece un error, que finalmente se ha informado . Si agrega una regla CSS para div[title] en cualquier parte de su hoja de estilo con al menos una declaración, su div[title]:after rule se aplicará mágicamente. Por ejemplo:

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

Ver el violín actualizado .

También parece tener algo que ver con que tu segundo div tenga o no ciertos atributos HTML, como se muestra en los comentarios a continuación.