selector de CSS: no <img> como hijo

Estoy tratando de seleccionar todas las etiquetas de anclaje que enlazan a sitios externos que no tienen etiquetas de imagen de niño. Si tengo una imagen como enlace, agrega el pequeño icono de enlace externo al lado de esas imágenes también, pero no quiero eso.selector de CSS: no <img> como hijo

Esto es lo que tengo hasta ahora:

a[href^="http://"]{ 
    background:transparent url(..icon/external.png) center right no-repeat; 
    display:inline-block; 
    padding-right:18px; 
}

Como un beneficio adicional, ¿cómo puedo hacer que funcione con "https: //" enlaces así?

Fuente

2012-08-09 MaxGhost

Eso no se puede hacer actualmente con CSS. [Todavía no hay un selector principal.] (Http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – thirtydot

No veo la hora de que la especificación CSS 4 se convierta en estándar ... parece que hay un montón de características geniales para venir desde allí. – MaxGhost

El relleno proporciona espacio para el icono en el lado derecho del enlace, luego el fondo agrega la imagen misma, alineada a la derecha. inline-block hace que todo el enlace, incluida la imagen, pueda hacer clic. [Vea aquí para más información] (http://web-kreation.com/all/add-file-type-icons-next-to-your-links-with-css/) – MaxGhost

Esto no es posible con CSS simple. Sin embargo, usted podría utilizar un poco de jQuery magia:

jQuery:

$("a[href^='http://']:not(:has(img))").addClass("external");

CSS:

a.external { 
    background:transparent url(..icon/external.png) center right no-repeat; 
    display:inline-block; 
    padding-right:18px; 
}

Ver Demo: http://jsfiddle.net/hKTBp/

Ver Demo (incluyendo HTTPS): http://jsfiddle.net/hKTBp/1/

Fuente

2012-08-09 15:52:50 Curt

No creo que pueda hacerlo de manera segura supongamos que tiene jQuery instalado. – kojiro

@kojiro Estoy de acuerdo, pero puedo decir con seguridad que lo que OP quiere no es posible, y he proporcionado una alternativa ordenada. – Curt

¡Buena solución! Hubiera preferido una solución que no sea JS, pero esto funciona. Tengo jQuery, así que está bien. – MaxGhost

selector de CSS: no <img> como hijo

Respuesta

Cuestiones relacionadas