Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS styling links using id's and classes

Tags:

css

class

styling

Is there a way of styling links using a id or a class without having to create a new selector for each individual element? for example something like this or close to this would be preferable

#logo {
    a: link {color: black}
    a: visited{color: black}
    a: hover{color: black}
}

However, the above syntax does not work instead all i can find is

#logo a:hover {
    color: black;
}


#logo a:visited {
color: white
}

I feel like there's an easier way than this.

like image 370
Rking Avatar asked Dec 05 '22 13:12

Rking


2 Answers

Heres how to do it to all links I believe it should work:

#logo a:link,
#logo a:visited,
#logo a:hover {
   color: black;
}
like image 126
Bobb Dizzles Avatar answered Dec 07 '22 03:12

Bobb Dizzles


Not all browser support the above methodology of separating the tag styles with class or ID when you are dealing with different style in CSS with tag in single page.

One can follow below method:

**If using ID with Field**

a:link#myID {
    color: green;
    background-color: transparent;
    text-decoration: none;
} 
a:visited#myID {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover#myID {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active#myID {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
    <a  href="#" target="_blank" ID="myID">Click Here</a> 

**If using Class with Field**

a:link.myClass {
    color: green;
    background-color: transparent;
    text-decoration: none;
} 
a:visited.myClass {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover.myClass {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active.lx {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
<a  href="#" target="_blank" class="myClass">Click Here</a> 
like image 34
pkm1986 Avatar answered Dec 07 '22 02:12

pkm1986