How to turn a link’s properties into a specific class or id?

Asked

Viewed 23 times

-1

How I can turn link properties into a class or id?

a:link
a:visited
a:hover
a:active

I can transform them into a class and use them individually in some element?

1 answer

1


No need to transform anything, just put the id or class in place of the tag.

Example

#cancel:hover      /* não precisa por a tag "a" */
.external:visited  /* e aqui, qualquer elemento com classe "external" que
                      tenha o estado "visited" será afetado               */

Look in the snippet:

a {color:blue}         /* Vale para todos os links */
a:hover {color:green}  /* Vale para todos os links */
#b:hover {color:red}   /* Vale somente para o #b   */
<a id="a">Hover genérico</a><br>
<a id="b">Hover diferente</a><br>
<a id="c">Hover genérico</a><br>

  • Okay, I get it, my doubt has arisen that for example, I am creating a menu and applying the properties of "a", it applies in a general way, and on the same page I have a "Whatsapp" button (img+link) fixed at the bottom corner of the screen, he gets these properties applied too, that’s my question in the application "individual"

  • is the same as the item with id #b, when I specified individual in CSS, it "went over" the generic by specificity. More details on this link

  • So how does the structure of #b apply different colors to Hover and visited for example?

  • Same thing, make a #b:visited also (and a #b:active, etc.).

  • Ah, didn’t know it could have more than one id with the same name xD, thank you!

  • 1

    CSS is cumulative. If you do one line #b {color:red} and the other #b {font-size:76px} both features will work (read the link I passed the second comment to know the order of the application) - Still, #b:active and #b:Hover are different definitions, increasing the specificity (as already mentioned link). The suggestion is you do various experiments, don’t just try things just when you need to actually use.

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.