Any Tricks to Make <a name="foo:> Not Look Like a Liink?

[ETpro]

Of course you can always define a class for the <a> tags just used for in-page names instead of link HREFs. But is there any shortcut you can just define in your style sheet that will automagically treat <a name="foo"> and <a href="foo"> as two separate instances and style them differently?

[djr33]

I don't know of a way. But why is <a name="foo"> necessary? If you are trying to create an anchor, you can do it like this:
<a name="foo"></a><span>...</span>

Then the content is in the span, not the a tag.

You could also place something else inside the <a> tag such as a span, etc.

There might be a pure CSS way, but I don't know what it is.

[ETpro]

I don't know of a way. But why is <a name="foo"> necessary? If you are trying to create an anchor, you can do it like this:
<a name="foo"></a><span>...</span>

Then the content is in the span, not the a tag.

You could also place something else inside the <a> tag such as a span, etc.

There might be a pure CSS way, but I don't know what it is.Thanks, Daniel. I've personally never seen that not work, but had read that it was poor practice because some browsers will ignore it unless it has content. I was figuring if I have to put content in it and suppress the display of it with some class or local style, that is more work than just adding a class to the <a> tag to start with. :-)

[djr33]

Why not use a tag inside <a> then?

<a name="foo"><span class="bar">Hello World.</span></a>

And you can refer to that using:
a span.bar

That's about as short as I can imagine it. You could also, I suppose, not use a class on the span and just use a span and that would do what you need... I think.


Realistically, I wonder what browsers will ignore it, and whether that will actually ever be relevant.