On May 11, 2010, at 3:08 AM, Susan Grossman wrote:
> I can't seem to figure out how to leave out any images in a pseudo element
> selector for off-site links. The following blocks the domains fine and
> attaches to all other outside links (except IE), but sometimes images are
> linked and need to be excluded.
>
> a:not([href^="XXXX.com"]):not([href^="xxxx.com"]):after { content:"\279F"; }
If I understand correctly, you want those 'external' links to display a
right-pointing arrow next to the linked text, but those external links that
contain an image should not have that arrow. Correct ?
(as always, linking to a minimal test case makes things much easier to
understand…).
> Have tried things like:
>
> a:after img { content:none !important; }
>
> .. obviously wrong syntax. Any suggestions?
Obviously, that won't work, given the syntax above. The generated content is
applied to the link, not the image, child of that link.
And also note the last paragraph under CSS 2.1:12.1 regarding replace elements
http://www.w3.org/TR/CSS21/generate.html#before-after-content
What you'll need to do is append a class to those links that contain an image,
then write you selector thusly:
a:not([href^="XXXX.com"]):not([href^="xxxx.com"]):not([class="image-in-link"]):after
{ content:"\279F"; }
<a href="abcd.com" class="image-in-link"><img src="my-image.png alt=""></a>
CSS has no provisions, to date, to do reverse lookup, of the type
a:contains(img) or the like. There have been various proposals to the css-wg
but none worked out so far
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
