I would like to change the look of all anchor tags in the body except ones in the navbar, I tried:
a:not(.navbar) a {
color: #333;
}
a:hover:not(.navbar): {
color: #999;
}
But it doesn't work, all tags became the same.
Is this possible?
EDIT: I have some other attributes such as transitions as well, so I can't set the restore the values for the rest.
Have you tried selecting .navbar a tags and restoring their values?
a {
color: #333;
}
a:hover {
color: #999;
transition: color 2s;
}
.navbar a,
.navbar a:hover {
color: initial;
transition: none;
}
I think the code is quite self-explanatory, but I'll explain it:
Select all divs except the ones with class "navbar", and to all links inside those apply certain styles.
div:not(.navbar) a {
color: #333;
}
div:not(.navbar) a:hover {
color: #999;
}
div:not(.navbar) a {
color: red;
}
div:not(.navbar) a:hover {
color: green;
}
<div>
link
</div>
<div class="navbar">
link should NOT be red
</div>
<div>
link
</div>
Related
The hyperlink's initial colour is blue, i.e,, of the visited selector. But the background-colour is black, i.e., of the link selector. Additionally, after visiting the link once, the text colour remains blue as it should be, but the background does not transform to transparent.
Here is the styling code:
<style>
a:link {
color: pink;
background-color: black;
text-decoration: none;
}
a:visited {
color: blue;
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;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
HTML Images
</body>
</html>
I am not able to understand the behaviour of the link selectors. Why is the formatting unclear, and am getting the random mixed-output from the two different and exclusive selector?
Visited: A link when it has already been visited (exists in the browser's history), styled using the :visited pseudo-class.
So if you have visited your link at least once it will always be visited
You can read more about this here.
You need to add some background-color to anchor tag and add link with visited for visited to work like a:visited:link. Try below CSS :
a:link {
color: pink;
background-color: black;
text-decoration: none;
}
a:visited:link {
color: blue;
background-color: transparent !important;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
a {
background-color: #fff;
}
I have this for my default css which is exactly what I want for the majority of my webpage (RED and then it underlines on hover)
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
However in some cases I want it to be White and but then still turn red on hover, and I was hoping to override the white on the occasions I need to as it is far less common than the other style.
I tried
a href="/" style="color:#FFF">Home
This overrides the colour for both parts which makes sense for why it is doing it, but I want it to only overwrite the static link and not the on hover.
Any help would be appreciated!
Thanks
You can use a class, take a look at this
article {
background: #ccc;
padding: 20px;
}
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
a.white:link, a.white:visited{
color: #FFF;
text-decoration: none;
}
a.white:hover, a.white:visited:hover{
color: #F00;
text-decoration: underline;
}
<article>
<p>
normal
</p>
<p>
alternate
</p>
</article>
Use a class with the color white defined, then apply this class to each anchor that should be white. In CSS...
a.white:link, a.white:visited {
color:#ffffff;
}
In HTML...
...
Just use a class for this.
body {
background: gray;
}
a.whiteLink {
color: white;
}
a {
color: #F00;
text-decoration: none;
}
a:hover {
color: #F00;
text-decoration: underline;
}
Home
I'm sure this is a rather simple fix but I haven't been able to figure it out.
I used the page properties in Dreamweaver to come up with the CSS for the links on the page and everything was working correctly. I now have one row where I need to change both the link and hover colors for a few links.
<head>
<style type="text/css">
<!--
body {
background-color: #666666;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
color: #000000;
-->
</style>
</head>
I was able to change the link color successfully by using the code below in the body.
Website
What I have not been able to do successfully is change the rollover. I've searched and tried a few different methods to solve the problem but haven't had any success. Could somebody point out what I'm doing wrong or give me an example of how the CSS should look?
Give your special links a special class:
CSS
.link
{
color: rgb(20, 80, 153);
}
.link:hover{..}
.link:active{..}
.link:visited{..}
HTML
Website
So to colour the link you just need:
a{
color: rgb(20,80,153);
text-decoration: none;
}
Then if its hover you want:
a:hover {
color: red;
}
HTML:
Website
CSS:
a{
color: rgb(20,80,153);
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
color: red;
}
DEMO HERE
On top of that, if you do not want it for ALL links you give them a class:
HTML:
Website
CSS:
.test {
color: rgb(20,80,153);
}
.test:hover {
color: red;
}
DEMO HERE
use class names instead of just targeting the a
CSS
a.someName1:link {
color: #000000;
text-decoration: none;
}
a.someName1:visited {
text-decoration: none;
color: #000000;
}
a.someName1:hover {
text-decoration: none;
color: #666666;
}
a.someName1:active {
text-decoration: none;
color: #000000;
}
HTML
Website
The easiest way to change the colors for a entire row would be to add a class to said row (or <tr>, I'm assuming) and then add CSS for all links that are descendants of a element with that class.
I'm making some assumptions on your HTML, but it will probably go something like this...
HTML:
<tr class="atl-color">
<td>Link #1</td>
<td>Link #2</td>
</tr>
CSS:
.alt-color a:link { color: blue; }
.alt-color a:hover { color: red; }
My problem is that, when I hover over my div, it doesn't change the links color to what I want it to be. It just stays its default black color.
How can I make it so that when I hover over the thumbnail-cointainer div, it changes the color of the link?
<div class="thumbnail-container">
Text Here
</div>
CSS:
a {
color: #000000;
text-decoration: none;
}
a:hover,
a:focus {
color: #005580;
text-decoration: underline;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
float: left;
}
.thumbnail-container:hover {
color: #0088cc;
}
The problem is selector specificity. Select the anchor as well:
.thumbnail-container:hover,
.thumbnail-container:hover a {
color: #0088cc;
}
Or depending on what you want you may use inherit. Just add this:
.thumbnail-container a {
color:inherit;
}
.thumbnail-container:hover a {
color: #0088cc;
}
I have a hyperlink in my website that I want to be part #A0A0A0 and part #880000 for a:link and a:visited, and I want it to change to part #FFFFFF and part #AA0000 for a:hover and a:active. But I want it to be all one link. I have tried two solutions so far, but neither worked out the way I want.
The first was:
a.menu:link { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:hover { color: #ffffff; text-decoration: none; }
a.menu:active { color: #ffffff; text-decoration: none; }
<a class="menu" href="/about.html">Dubious
<span style="color: #880000;">Array</span>
.net</a>
In this solution, the color of the middle part ('Array') stays as #880000 the whole time and doesn't change to #AA0000 for :hover or :active.
The second solution was to create a <a> </a> for each part of the string (so one for 'Dubious', one for 'Array' and one for '.net') and have the css for the middle <a> </a> be
a.redMenu:link { color: #880000; text-decoration: none; }
a.redMenu:visited { color: #880000; text-decoration: none; }
a.redMenu:hover { color: #AA0000; text-decoration: none; }
a.redMenu:active { color: #AA0000; text-decoration: none; }
The colors worked fine this way; but the string was three separate links, so mousing over one link wouldn't change the color in the others.
So what I want to be able to do is to change the css in the middle of a hyperlink from a.menu to a.redMenu then back again to a.menu, but I can't work out how. Can anyone here solve my problem?
Thanks, Jacob
You can use your original HTML, just remove the inline style:
<a class="menu" href="/about.html">
Dubious<span>Array</span>.net
</a>
Then simply add these css declarations for span:
a.menu:link span, a.menu:visited span{color: #880000;}
a.menu:hover span, a.menu:active span {color: #aa0000;}
a.redMenu:hover span { color: #AA0000; text-decoration: none; }
This tells the span what color to be when it's parent link is hovered.
<html>
<head>
<style type="text/css">
p { background: #00c }
a.menu:link { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:active { color: #ffffff; text-decoration: none; }
a.menu:hover span.normal { color: #800 }
a.menu:hover span.hilite { color: #880 }
</style>
</head>
<body>
<p><a class="menu" href="/about.html"><span class="normal">Dubious
<span class="hilite">Array</span> .net</span></a>
</p>
</body>
</html>