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.