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:"somethingappropriate"}

<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.withImg: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:after{content:"somethingappropriate"}

<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.withImg: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:after{content:"somethingappropriate" }

<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.

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"><span class="linkText">Offsite!</span></a>

Just a thought.

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

[Tim & Alethea Larson]

Matt Kruse wrote:

Why do you want to avoid using an image?

Why should I use an image? There's no compelling reason, so I'd just as
soon save a little bandwidth.

Tim

--
Tim & Alethea
www.ChristTrek.org

[Tim & Alethea Larson]

Brian wrote:

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.

Only if "look" is more important than substance. In my case it isn't.

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.

Hmm, that's a possibility. I wonder if I dig around the W3 I can find
out who was on that working group.
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.

I'm glad I don't bother with IE.

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.

I am seeing the big picture. My markup is meaningful. I shouldn't have
to clutter it up for solely stylistic reasons when the HTML that's there
says everything that needs to be said. Might as well go back to FONT
tags if we're going that direction.

Tim

--
Tim & Alethea
www.ChristTrek.org

[Brian]

Tim & Alethea Larson wrote:

I shouldn't have to clutter it up for solely stylistic reasons when
the HTML that's there says everything that needs to be said. Might
as well go back to FONT tags if we're going that direction.

Nothing like overstating your case by exageration.

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

[Brian]

Tim & Alethea Larson wrote:

I shouldn't have to clutter it up for solely stylistic reasons when
the HTML that's there says everything that needs to be said. Might
as well go back to FONT tags if we're going that direction.

Nothing like overstating your case by exaggeration.

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

[Lauri Raittila]

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" }
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!
I think that most people would guess that you intend to open these links
in new window. As you are not doing that, it is confusing. (If you are
doing that, don't - it is annoying and does not help anybody)
It seems I need a parent selector
IIANM, it is planned on CSS3.
Am I missing something obvious?

An marker that shows link is offsite, is content, not style. A person
using non CSS browser would like to see it too.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Stan Brown]

"Tim & Alethea Larson" <th********@ll.net> wrote in
comp.infosystems.www.authoring.stylesheets:

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!

If "works great!" means "works on your system", then yes. As others
have tried to tell you, you're assuming that every visitor to your
site has a font available that contains that glyph -- and that's an
extremely bad assumption.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/

[Tim & Alethea Larson]

Stan Brown wrote:

If "works great!" means "works on your system", then yes. As others
have tried to tell you, you're assuming that every visitor to your
site has a font available that contains that glyph -- and that's an
extremely bad assumption.

No, it does work great. Assuming every visitor had some functionality
that is critical to get a normal experience out of the site would be a
bad assumption. The link still works either way; knowing the link is
offsite is hardly critical behavior or knowledge. For those that have
it, it's a nice additional perk. For those that don't, they aren't
missing much. The worst that can happen is the rule will work but the
glyph be unavailable - hardly catastrophic. This sounds like a
near-perfect example of designing for graceful degradation in my opinion.

Y'all must think I'm new here, just because I haven't posted much in
three years. Your advice would be better spent on someone using
absolute font sizes or designing for fixed browser widths.

Tim

--
Tim & Alethea
www.ChristTrek.org

[Tim & Alethea Larson]

Lauri Raittila wrote:

Tim & Alethea Larson wrote;

It seems I need a parent selector
IIANM, it is planned on CSS3.

If you could find a reference I'd appreciate it. I tried reading
through the candidate selector recommendation for CSS3 but didn't spot it.
An marker that shows link is offsite, is content, not style. A person
using non CSS browser would like to see it too.

I have the "marker" in content, as a class. I'm using style to make
that visible to the user.

Tim

--
Tim & Alethea
www.ChristTrek.org

[Lauri Raittila]

Tim & Alethea Larson wrote;

Lauri Raittila wrote:

Tim & Alethea Larson wrote;

It seems I need a parent selector

If you could find a reference I'd appreciate it. I tried reading
through the candidate selector recommendation for CSS3 but didn't spot it.
I read about it on mailing www-style mailing list, it seems to never had
made to CR.

Sun, 4 May 2003 15:17:08 +1000 (EST)
From: Michael Day <mi*****@yeslogic.com:

|> i can't see (with css3 selectors) how to select a paragraph
|>containing, say a defining instance of a term.
|
|CSS3 Selectors does not have a parent combinator, although many people
|seem to have suggested such a thing.
|
|Ian Hickson's proposal is probably the closest to what you want:
|
|p:has(dfn) { ... }

I can't find Ians orginal proposal atm, it is propably older than my
archive, try looking online arhive if interested.
I have the "marker" in content, as a class. I'm using style to make
that visible to the user.

But, you could use some other way to mark up the content, and it would
not be wrong.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Neal]

On Mon, 18 Oct 2004 06:45:52 -0500, Tim & Alethea Larson
<th********@ll.net> wrote:

The worst that can happen is the rule will work but the glyph be
unavailable - hardly catastrophic.

What will appear? I have no idea. Do you? Maybe �?

[Lauri Raittila]

Neal wrote;

On Mon, 18 Oct 2004 06:45:52 -0500, Tim & Alethea Larson
<th********@ll.net> wrote:

The worst that can happen is the rule will work but the glyph be
unavailable - hardly catastrophic.

What will appear? I have no idea. Do you? Maybe �?

I think it will be just as useful as arrow, both confuse user, and help
no-one...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Neal]

On Mon, 18 Oct 2004 21:10:07 +0300, Lauri Raittila
<la***@raittila.cjb.net> wrote:

Neal wrote;

On Mon, 18 Oct 2004 06:45:52 -0500, Tim & Alethea Larson
<th********@ll.net> wrote:

> The worst that can happen is the rule will work but the glyph be
> unavailable - hardly catastrophic.

What will appear? I have no idea. Do you? Maybe �?

I think it will be just as useful as arrow, both confuse user, and help
no-one...

The real question is - do we really need to mark links that are on- or
off-site? Is it relevant to the user?

My answer is no, it's generally not. I find these little off-site icons
horribly distracting in reading the text. If you have a list of links,
sure, organize them as on- and off-site, but the little icon isn't really
needed.

[Dr John Stockton]

JRS: In article <op**************@news.individual.net>, dated Mon, 18
Oct 2004 14:21:02, seen in news:comp.infosystems.www.authoring.styleshee
ts, Neal <ne*****@yahoo.com> posted :

The real question is - do we really need to mark links that are on- or
off-site? Is it relevant to the user?
In an informational site, it is. It's useful for a reader to be able to
see whether a link is to other work by the same author, or to an
independent source of information.

It's also useful, especially for intermittently-connected readers, to be
able to see whether a link is to elsewhere on the same page or to
another page.

I'd like to see that done automatically (by default), using text-
decoration dependent on the form of the href parameter - say full
underline as at present for links to other sites, dashed underline for
relative links to different pages, and dotted underline for within-page
links.
My answer is no, it's generally not. I find these little off-site icons
horribly distracting in reading the text. If you have a list of links,
sure, organize them as on- and off-site, but the little icon isn't really
needed.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Plaintext, quoting : see <URL:http://www.usenet.org.uk/ukpost.html>
Do not Mail News to me. Before a reply, quote with ">" or "> " (SoRFC1036)

[Neal]

On Tue, 19 Oct 2004 13:18:35 +0100, Dr John Stockton
<sp**@merlyn.demon.co.uk> wrote:

JRS: In article <op**************@news.individual.net>, dated Mon, 18
Oct 2004 14:21:02, seen in news:comp.infosystems.www.authoring.styleshee
ts, Neal <ne*****@yahoo.com> posted :

The real question is - do we really need to mark links that are on- or
off-site? Is it relevant to the user?
In an informational site, it is. It's useful for a reader to be able to
see whether a link is to other work by the same author, or to an
independent source of information.

<p>Please refer to <a href="http://example.com/foo/">example.com's foo
pages</a>. (A <a href="foosummary.html">summary of foo</a> is available on
this site.)</p>

Context is better than an ugly icon which fails on many setups.
It's also useful, especially for intermittently-connected readers, to be
able to see whether a link is to elsewhere on the same page or to
another page.
Well, for the HTML-savvy, the status bar will normally reveal the link's
destination, and you can verify it yourself. For the uninitiated, context
can again be used.
I'd like to see that done automatically (by default), using text-
decoration dependent on the form of the href parameter - say full
underline as at present for links to other sites, dashed underline for
relative links to different pages, and dotted underline for within-page
links.

If it were to be done, this would be the appropriate way to handle it.
There's no sense in everyone doing this differently, it will serve only to
confuse the user. Sadly, it's not, which means there's not going to be a
reliable way to do this which all users will understand.

The goal is noble, but the practicality is a mess.

[Dr John Stockton]

JRS: In article <op**************@news.individual.net>, dated Tue, 19
Oct 2004 14:14:37, seen in news:comp.infosystems.www.authoring.styleshee
ts, Neal <ne*****@yahoo.com> posted :

On Tue, 19 Oct 2004 13:18:35 +0100, Dr John Stockton
<sp**@merlyn.demon.co.uk> wrote:

JRS: In article <op**************@news.individual.net>, dated Mon, 18
Oct 2004 14:21:02, seen in news:comp.infosystems.www.authoring.styleshee
ts, Neal <ne*****@yahoo.com> posted :

The real question is - do we really need to mark links that are on- or
off-site? Is it relevant to the user?

In an informational site, it is. It's useful for a reader to be able to
see whether a link is to other work by the same author, or to an
independent source of information.

<p>Please refer to <a href="http://example.com/foo/">example.com's foo
pages</a>. (A <a href="foosummary.html">summary of foo</a> is available on
this site.)</p>

Context is better than an ugly icon which fails on many setups.

I mentioned no icon.

It is not always - indeed often not - convenient to mingle such
"instructional" text with the real material, especially in the common
(for what I write, at least) case where the link text names a topic
which I expect, but do not assume, that the reader will already know
about.

It's also useful, especially for intermittently-connected readers, to be
able to see whether a link is to elsewhere on the same page or to
another page.

Well, for the HTML-savvy, the status bar will normally reveal the link's
destination, and you can verify it yourself. For the uninitiated, context
can again be used.

It does not do so for me, unless I expand the window to more than my
preferred width. Apart from that, the status bar is not where my
attention is directed when I am reading text.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk DOS 3.3, 6.20; Win98. ©
Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links.
PAS EXE TXT ZIP via <URL:http://www.merlyn.demon.co.uk/programs/00index.htm>
My DOS <URL:http://www.merlyn.demon.co.uk/batfiles.htm> - also batprogs.htm.

[Brian]

Dr John Stockton wrote:

I'd like to see that done automatically (by default), using text-
decoration dependent on the form of the href parameter - say full
underline as at present for links to other sites, dashed underline
for relative links to different pages, and dotted underline for
within-page links.

That's an awful lot of options used for link destination. Note that
dotted border-bottoms are already used by Mozilla (and Opera, I think)
for <abbr> and <acronym>. For my part, I'd rather see additional
possibilities used for elements that are currently not styled, but
could use some style clues to help users. Example: dashed border for
<label>.

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