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

¿Cómo puedo combinar un selector de pseudo-elemento (:after) con un selector de atributo ([title])?¿Combina el atributo de CSS y los selectores de pseudo-elemento?

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 los divs, cuando debería mostrar "NO "después de la segunda div.

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

Fuente

2012-01-21 Senseful

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

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

Ver the updated fiddle.

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

Fuente

2012-01-24 14:22:52 BoltClock

Sí parece un error, mira esto: http://jsfiddle.net/jmAX6/6/ Agregar una clase al div sin título mágicamente lo hace funcionar. –

@Madmartigan: Estoy encontrando algunos otros errores relacionados también. Ahora presentar un informe simplemente parece una tarea ardua. Lo haré más tarde si lo recuerdo. – BoltClock

Parece que también depende del atributo utilizado, por lo que definitivamente tiene que ser un error: http://jsfiddle.net/jmAX6/7/ También echa un vistazo a la que tiene 'tabindex', cuando la tabulas, el pseudo elemento se corrige a sí mismo. –

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

Respuesta

Cuestiones relacionadas