CSS Style Element if it does not contain another specific type of Element [migrated]
- by Chris S
My CSS includes the following:
#mainbody a[href ^='http'] {
background:transparent url('/images/icons/external.svg') no-repeat top right;
padding-right: 12px;
}
This places an "external" icon next to links that start with "http" (all internal site links are relative). Works perfectly except if I link an Image, it also get this icon.
For example: <a href='http://example.com'><img src='whatever.jpg'/></a> would also get the "external" icon next to the image. I can live with this if necessary, but would like to eliminate it.
This must be implement in CSS (no JS); must not require any special IDs, Classes, styling in the html for the image or anchor around the image. Is this possible?
