How to set a active link as default when page first time load.

Question

Hi all, I need some help to set a link as active as default when the page load the first time.

<style type="text/css">
a{
color:black;
}
a:hover{
color:white;
}
a:active{
color:blue;
}
</style>


<div>
<!--I want this fisrt link to be set as active by default-->
<a href="#"/>
<!--I want this one as normal-->
<a href="#"/>
</div>

I did add more information to clarify the question.

Any help would be very much apreciated.

Thanks.

Answer 1

If you can change your markup to this:

<div>
<!--I want this fisrt link to be set as active by default-->
<a href="#" id="focusmeplease"/>
<!--I want this one as normal-->
<a href="#"/>
</div>

Then you can use this JavaScript:

document.getElementById('focusmeplease').focus();

Attach that JavaScript to page load however you like (I like this way, unless you're using jQuery, in which case use $(document).ready()).

Answer 2

1. Mark the "a" tags with a class (like "focus").
2. Set all the active "a" tags in the class "focus" with your preferred look.

<style type="text/css">
a
{color:black;}
a:hover
{color:white;}
a.focus:link, a.focus:visited
{color:blue;}
</style>

<div>
<a href="#" class="focus">This link is active by default.</a>
<a href="#">This is a normal link.</a>
</div>

Final note: I have also corrected the "a" tag because was wrong.

Answer 3

a{
  color:black;
}
a:hover {
  color:white;
}
a:active, div a:first-child {
  color:blue;
}

Supported by most recent browsers, but not much more than that.