Baxtex Posted April 5, 2011 Share Posted April 5, 2011 So, i got 2 links in my HTML document. I know how to style a link with CSS:a:link {color:#ff0000;}a:visited {color:#00ff00;}a:hover {color:#ff00ff;}a:active{color:#0000ff}But when i use that code, both my links get that style, so how do i make another style to my second link? Is there any way i can use the class code here? Link to comment Share on other sites More sharing options...
Spunky Posted April 5, 2011 Share Posted April 5, 2011 So, i got 2 links in my HTML document. I know how to style a link with CSS:a:link {color:#ff0000;}a:visited {color:#00ff00;}a:hover {color:#ff00ff;}a:active{color:#0000ff}But when i use that code, both my links get that style, so how do i make another style to my second link? Is there any way i can use the class code here?If you set a class yes that would work..firstLink a:link {color:#ff0000;}.firstLink a:visited {color:#00ff00;}.firstLink a:hover {color:#ff00ff;}.firstLink a:active{color:#0000ff}.secondLink a:link {color:#ff0000;}.secondLink a:visited {color:#00ff00;}.secondLink a:hover {color:#ff00ff;}.secondLink a:active{color:#0000ff} and obviously using different colors. I just copied and pasted. Link to comment Share on other sites More sharing options...
Ingolme Posted April 5, 2011 Share Posted April 5, 2011 If you set a class yes that would work..firstLink a:link {color:#ff0000;}.firstLink a:visited {color:#00ff00;}.firstLink a:hover {color:#ff00ff;}.firstLink a:active{color:#0000ff}.secondLink a:link {color:#ff0000;}.secondLink a:visited {color:#00ff00;}.secondLink a:hover {color:#ff00ff;}.secondLink a:active{color:#0000ff} and obviously using different colors. I just copied and pasted. That's not right. That code will target links that are descendents of the specified elements.Just using the class name alone will work:.link1:link { color: #FF0000; }.link2:link { color #0000FF; } Make sure to give a class name to your links. <a href="#" class="link1">Link</a><a href="#" class="link2">Link</a> Link to comment Share on other sites More sharing options...
Baxtex Posted April 5, 2011 Author Share Posted April 5, 2011 That's not right. That code will target links that are descendents of the specified elements.Just using the class name alone will work:.link1:link { color: #FF0000; }.link2:link { color #0000FF; } Make sure to give a class name to your links. <a href="#" class="link1">Link</a><a href="#" class="link2">Link</a> That worked fine! :)Thx! Link to comment Share on other sites More sharing options...
attila2452 Posted April 6, 2011 Share Posted April 6, 2011 That's not right. That code will target links that are descendents of the specified elements.Just using the class name alone will work:.link1:link { color: #FF0000; }.link2:link { color #0000FF; } Make sure to give a class name to your links. <a href="#" class="link1">Link</a><a href="#" class="link2">Link</a> couldn't you also use CSS Pseudo-elements? Link to comment Share on other sites More sharing options...
Spunky Posted April 6, 2011 Share Posted April 6, 2011 couldn't you also use CSS Pseudo-elements?I believe thats what is being used for this. a:link, a:visited, a:hover and a:active are psuedo elements, except classes are being applied so instead its .link1:link, .link1:visited, .link1:hover and .link1:active Link to comment Share on other sites More sharing options...
thescientist Posted April 6, 2011 Share Posted April 6, 2011 couldn't you also use CSS Pseudo-elements?that's what this is:hover just being applied to a class Link to comment Share on other sites More sharing options...
thescientist Posted April 6, 2011 Share Posted April 6, 2011 couldn't you also use CSS Pseudo-elements?that's what this is:hover just being applied to a class Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.