Jump to content
mohammad2232

different link style in one page

Recommended Posts

Hello

i tried to have many link style in one page (or one project) and tried to define different styles like:

mylink:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

mylink:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

mylink:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

mylink:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}

but i think it can work only like :

a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}

and now how can i have many link style ?

Thanks

Share this post


Link to post
Share on other sites
43 minutes ago, mohammad2232 said:

Hello

i tried to have many link style in one page (or one project) and tried to define different styles like:


mylink:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

mylink:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

mylink:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

mylink:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}

but i think it can work only like :


a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}

and now how can i have many link style ?

Thanks

thanks every body

i just find this

https://www.w3schools.com/css/tryit.asp?filename=trycss_link2

this is what i need and for every like me :)

 

Share this post


Link to post
Share on other sites

The a in a:link {} represent a anchor element.

What is mylink supposed to represent? class name? Then it should be

.mylink:link { color: green; background-color: transparent; text-decoration: none;

Else if id reference, it should be

#mylink:link { color: green; background-color: transparent; text-decoration: none;

 

  • Thanks 1

Share this post


Link to post
Share on other sites
1 hour ago, dsonesuk said:

The a in a:link {} represent a anchor element.

What is mylink supposed to represent? class name? Then it should be

.mylink:link { color: green; background-color: transparent; text-decoration: none;

Else if id reference, it should be

#mylink:link { color: green; background-color: transparent; text-decoration: none;

 

Thanks so much for your Explanation

Can you explain what is difference between id and class ?because both work as same

https://www.w3schools.com/code/tryit.asp?filename=FMMEKN39KJL1

.wm36:link {color:red;text-decoration:none;}
.wm36:visited {color:red;text-decoration:none;}
.wm36:hover {color:green ; text-decoration:underline;}

#wm37:link {color:red;text-decoration:none;}
#wm37:visited {color:red;text-decoration:none;}
#wm37:hover {color:green ; text-decoration:underline;}
<p><b><a class="wm36" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
<p><b><a id="wm37" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

Thanks

Share this post


Link to post
Share on other sites

A id identifier is singular and unique within a page, it is used to target one specific element only.

A class identifier is the opposite it can be used multiple times within a page.

  • Thanks 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×