parent selector?

[Tim & Alethea Larson]

In order to mark links leaving my site, I recently added this rule to my
stylesheet.

A[href][class="offsite"]:after { content: "\2197" }
The character is a northeast-pointing arrow, since that seems to be
fairly common notation for this. I wanted to avoid using an image,
though, and this content rule works great!

My problem is that some of my offsite links are graphics. I don't want
an arrow hanging off my button links. Is it possible to disable this
rule somehow, or change the content back to "", if the anchor contains
an image? I know there is a child selector A>IMG but that selects the
image not the anchor. It seems I need a parent selector, and there is
no A<IMG equivalent.

Am I missing something obvious?

Thanks,
Tim

--
Tim & Alethea
www.ChristTrek.org

[Neal]

On Tue, 12 Oct 2004 09:43:39 -0500, Tim & Alethea Larson
<th********@ll. net> wrote:

In order to mark links leaving my site, I recently added this rule to my
stylesheet.

A[href][class="offsite"]:after { content: "\2197" }
The character is a northeast-pointing arrow, since that seems to be
fairly common notation for this. I wanted to avoid using an image,
though, and this content rule works great!

My problem is that some of my offsite links are graphics. I don't want
an arrow hanging off my button links. Is it possible to disable this
rule somehow, or change the content back to "", if the anchor contains
an image? I know there is a child selector A>IMG but that selects the
image not the anchor. It seems I need a parent selector, and there is
no A<IMG equivalent.

Am I missing something obvious?

Assuming all the img anchors are in one section of the page, enclose them
in a div with an id. Then use that id as the parent.

[Spartanicus]

Tim & Alethea Larson <th********@ll. net> wrote:

In order to mark links leaving my site, I recently added this rule to my
stylesheet.

A[href][class="offsite"]:after { content: "\2197" }

The character is a northeast-pointing arrow, since that seems to be
fairly common notation for this. I wanted to avoid using an image,
though, and this content rule works great!
It doesn't, the glyph you are using is not present on my system.
My problem is that some of my offsite links are graphics. I don't want
an arrow hanging off my button links. Is it possible to disable this
rule somehow, or change the content back to "", if the anchor contains
an image? I know there is a child selector A>IMG but that selects the
image not the anchor. It seems I need a parent selector, and there is
no A<IMG equivalent.

Am I missing something obvious?

a.offsite:after {content:"somet hingappropriate "}

<a href="http://localhost/" class="offsite" >foobar</a>
<a href="http://localhost/"><img src="foobar" alt="foobar"></a>
<a href="index.htm ">foobar</a>

--
Spartanicus

[Brian]

Tim & Alethea Larson wrote:

In order to mark links leaving my site, I recently added this rule to
my stylesheet.

A[href][class="offsite"]:after { content: "\2197" }
You can also use

A.offsite[href]:after {}

which you might find easier to read. Better still,

A.offsite:after {}

assuming you have no <A> elements used as target anchors. I use id for
that, so there are no <A> elements in my page without an href attribute.
The drawback is that Netscape 4- will not recognize id for targets. But
its usage is low enough for me that I don't fret about target failures. :-)
The character is a northeast-pointing arrow, since that seems to be
fairly common notation for this. I wanted to avoid using an image,
though, and this content rule works great!
On Opera and Moz, possibly Safari and others, sure. But you do know it
fails on MSIE, right?
My problem is that some of my offsite links are graphics. I don't
want an arrow hanging off my button links. Is it possible to disable
this rule somehow, or change the content back to "", if the anchor
contains an image?
Spartanicus gave you the easiest solution: remove the class "offsite"
from links with images. If you want to keep that class for other
reasons, you can also use multiple classes:
<a href="samesite. html">this link has no icon after it</a>

<a href="http://www.example.com/bar" class="offsite" >this link has a
nifty icon to show that it goes offsite</a>

<a href="http://www.example.com/foo" class="offsite withImg"><img
src="foobar.png " alt="this link does *not* have an icon after it"></a>
A.offsite:after {content:"arrow "}

A.offsite.withI mg:after {content: ""}

I know there is a child selector A>IMG but that selects the image not
the anchor. It seems I need a parent selector, and there is no A<IMG
equivalent.

Correct, there is no parent selector in css 2.

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/

[Tim & Alethea Larson]

Neal wrote:

Assuming all the img anchors are in one section of the page, enclose
them in a div with an id. Then use that id as the parent.

No, they could be anywhere.

Tim

--
Tim & Alethea
www.ChristTrek.org

[Tim & Alethea Larson]

Spartanicus wrote:

It doesn't, the glyph you are using is not present on my system.


Actually the rule works fine, it's your browser/system that's not up to
par. ;)
a.offsite:afte r{content:"some thingappropriat e"}

<a href="http://localhost/" class="offsite" >foobar</a>
<a href="http://localhost/"><img src="foobar" alt="foobar"></a>
<a href="index.htm ">foobar</a>

You seem to be suggesting I remove the class if the anchor has an image.
That changes the semantics of what I'm doing. The link _is_ offsite,
whether it's text or image, and I should be able to mark it as such. I
don't put classes on things just because I want to hang a style on them,
I put classes on things because it means something. Having
distinguishing styles based on those classes to give a visual cue to the
reader is a nice side-effect.

Tim

--
Tim & Alethea
www.ChristTrek.org

[Tim & Alethea Larson]

Brian wrote:

Tim & Alethea Larson wrote:

A[href][class="offsite"]:after { content: "\2197" }

You can also use

A.offsite[href]:after {}

..offsite is equivalent to class~="offsite ", which is not the same as my
rule. I purposely want to not match anchors with more than one class,
which possibly (probably) have some other style by virtue of those other
classes.
A.offsite:after {}

assuming you have no <A> elements used as target anchors. I use id for
that, so there are no <A> elements in my page without an href attribute.
The drawback is that Netscape 4- will not recognize id for targets. But
its usage is low enough for me that I don't fret about target
failures. :-)

You're probably right that the [href] is unnecessary in this case. I
started by copying another anchor rule.

The character is a northeast-pointing arrow, since that seems to be
fairly common notation for this. I wanted to avoid using an image,
though, and this content rule works great!

On Opera and Moz, possibly Safari and others, sure. But you do know it
fails on MSIE, right?

I'm not overly concerned about broken browsers. ;) Seriously though,
that is acceptable behavior. IE doesn't try to implement the rule and
do it wrong, it is just ignoring it. It wouldn't be the first time that
IE users get a substandard experience.
Spartanicus gave you the easiest solution: remove the class "offsite"
from links with images. If you want to keep that class for other
reasons, you can also use multiple classes:
<a href="samesite. html">this link has no icon after it</a>

<a href="http://www.example.com/bar" class="offsite" >this link has a
nifty icon to show that it goes offsite</a>

<a href="http://www.example.com/foo" class="offsite withImg"><img
src="foobar.png " alt="this link does *not* have an icon after it"></a>
A.offsite:after {content:"arrow "}

A.offsite.withI mg:after {content: ""}

I shouldn't have to attach a class that says it has an image or not.
This should be apparent from the document tree. It appears that CSS
just has no way of accessing this particular information. Neither
should I have to remove the offsite class. It _is_ an offsite link
whether it is text or graphical, and by removing the class I remove that
meaning.

I know there is a child selector A>IMG but that selects the image not
the anchor. It seems I need a parent selector, and there is no A<IMG
equivalent.

Correct, there is no parent selector in css 2.

Major bummer.

Thanks,
Tim

--
Tim & Alethea
www.ChristTrek.org

[Spartanicus]

Tim & Alethea Larson <th********@ll. net> wrote:

a.offsite:aft er{content:"som ethingappropria te"}

<a href="http://localhost/" class="offsite" >foobar</a>
<a href="http://localhost/"><img src="foobar" alt="foobar"></a>
<a href="index.htm ">foobar</a>

You seem to be suggesting I remove the class if the anchor has an image.
That changes the semantics of what I'm doing. The link _is_ offsite,
whether it's text or image, and I should be able to mark it as such. I
don't put classes on things just because I want to hang a style on them,
I put classes on things because it means something. Having
distinguishi ng styles based on those classes to give a visual cue to the
reader is a nice side-effect.

So? Change the class name.

--
Spartanicus

[Brian]

Tim & Alethea Larson wrote:

Brian wrote:

Spartanicus gave you the easiest solution: remove the class
"offsite" from links with images. If you want to keep that class
for other reasons, you can also use multiple classes:

I shouldn't have to attach a class that says it has an image or not.

Whether you should or should not, I'm afraid you'll have to.
This should be apparent from the document tree. It appears that CSS
just has no way of accessing this particular information.
Correct. Those who wrote the spec might have good reasons for that --
perhaps a parent selector would cost too much in processing overhead.
You'd have to ask them to get a better answer.

There's lots that we can't do without resorting to class, due to
shortcomings in MSIE, the dominant browser. Two fairly straightforward ones:

foo[id] {}

foo > bar {}

And lots more. My code would be a bit more readable if it weren't for
that os component we all love to hate.
Neither should I have to remove the offsite class. It _is_ an
offsite link whether it is text or graphical, and by removing the
class I remove that meaning.

What meaning is that? Your classname only has meaning to you. No ua will
use it; no ua can use it, since it's your namespace. I think you're not
seeing the big picture.

--
Brian (remove "invalid" to email me)

[Matt Kruse]

Tim & Alethea Larson wrote:

The character is a northeast-pointing arrow, since that seems to be
fairly common notation for this. I wanted to avoid using an image,
though, and this content rule works great!

Why do you want to avoid using an image?

I'm no CSS expert, and this may require changes to your html, but this works
well for me:

a.offsite span.linkText {
padding-right:24px;
background-image:url(/offsite.gif);
background-repeat:no-repeat;
background-position:center right;
}

<a class="offsite" href="site"><sp an class="linkText ">Offsite!</span></a>

Just a thought.

--
Matt Kruse
http://www.JavascriptToolbox.com