This is the css for setting the color for h1 text that is linked:
.nav-left h1 a,
a:visited {
color: #055830;
}
<div class="nav-left">
<h1>Housing</h1>
</div>
It does not look like it is working appropriately, any help is appreciated.
What about:
.nav-left h1 a:visited{
color:#055830;
}
if you want the colour to be the same for unvisited links you'll need to add a specific selector for that as well
.nav-left h1 a:link, .nav-left h1 a:visited {
color:#055830;
}
If you want them the same, you must be specific:
.nav-left h1 a, a:visited
is not the same as:
.nav-left h1 a, .nav-left h1 a:visited
.nav-left h1 a {
color: #055830;
}
You don't need to add a:visited if it is the same color.
Related
I want to underline all links but not if the links are h1,h2 and so on.
here is a simple css:
#heatmapthemead-the-content-container .entry-content a {
text-decoration: underline;
}
This underlines all links including h1,h2,h3
when I use :not selector it doesn't work and also h1,h2 stay underlined
#heatmapthemead-the-content-container .entry-content a:not(h1,h2,h3) {
text-decoration: none;
}
I use also !important :
h1,h2,h3,h4,h5,h6 a {
text-decoration: none !important;
}
But h1,h2 links stay underlined.
Does anybody have a trick?
There's no need to make it !important. Look at the example below.
a{
text-decoration: underline;
}
h1 a,
h2 a,
h3 a{
text-decoration: none;
}
<div>
<h1>Sample</h1>
<p>Sample</p>
<h2>Sample</h2>
<div>Sample</div>
<h3>Sample</h3>
</div>
You're writing the code in wrong way, write it like
h1 a, h2 a, h3 a{
text-decoration: none;
}
and so on.
And writing like this will make the code more readable, and easier to find your mistake.
h1 a,
h2 a,
h3 a{
text-decoration: none;
}
It not gonna make any difference in the output though.
Your last example has the right idea and should work if you did it like this:
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none !important;
}
You don't have to use :not. All you have to do is select the tags but add a next to it, so that it selects the h1s that are a link. By doing the following it should work.
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none !important;
}
To see more click here
I'm using Bootstrap3 for a small website, and I need to change the link color in one of my divs.
However, for some reason, the bootstrap link colors are always being applied instead of my custom ones.
CSS:
.social a,
.social a:hover,
.social a:focus {
color: #fefefe;
}
HTML:
<div class="social">
<i class="fa fa-linkedin"></i>
</div>
I also tried this:
.social > a,
.social > a:hover,
.social > a:focus {
color: #fefefe;
}
But doesn't make a difference.
#fefefe is a white color. Maybe you have white content on a white background.
It should work.
body {
background-color: darkgrey;
}
.social a,
.social a:hover,
.social a:focus {
color: #fefefe; // white
}
Example
Try adding .social a:link to the list
either add !important to your style:
color: #fefefe!important;
or better, make sure your styles are loaded AFTER bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyle.css">
EDIT:
if <a> tags is what want to style you might want to apply your color to :link and :visited too:
.social a,
.social a:link,
.social a:visited,
.social a:hover,
.social a:focus {
color: #fefefe;
}
From the chrome debugger:
element.style {
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
(Everything below this is struck through)
nav a:link,a:visited,a:hover,a:active {
color: #000000;
text-decoration: none;
}
nav a:link,a:visited,a:hover,a:active {
color: #000000;
text-decoration: none;
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
I'm trying to figure out why an element (title) is not showing up properly. This is what it looks like in the html body:
<div id="title">
link
</div>
I understand that when it's struck through, that style isn't being applied. What I don't understand is
a) Why is the nav style being called at all?
b) Why does the title style for links get called several times? The first time it seems to work, but the second time it's being struck through? (On the website, the element currently is only showing up in black text.)
Thanks in advance!
Your style is being called because the nav parent only applies to the first part of the selector. Basically you have this:
nav a:link,
a:visited,
a:hover,
a:active{
//style
}
What you really want is:
nav a:link,
nav a:visited,
nav a:hover,
nav a:active{
//Style
}
The same thing goes for the #title a:link, a:visited, a:hover, a:active
My guess on why it is trying to use the same CSS multiple times would be that you have the same CSS in multiple places. E.G. you are either
Importing the CSS twice
Importing two CSS files with a duplicate style
Duplicating the CSS in your one CSS file
Check the associated line numbers and see if they are the same (meaning it is actually using the exact same CSS twice) or different (meaning you have the same CSS in multiple places).
you have:
#title a:link, a:visited, a:hover, a:active {
color: #FF33CC;
text-decoration: none;
}
but what it seems like you need is:
#title a:link, #title a:visited, #title a:hover, #title a:active {
color: #FF33CC;
text-decoration: none;
}
the id tag has to appear after each comma, otherwise you are styling ALL links, not just the ones with the #title id.
Hope that helps!
I'm trying to build my first site and am trying to use the "a:hover" feature in CSS but can't get it to work - the links look the same whether hovering or not.
Here's a snippet of my CSS file:
/* main page elements */
a:link
{
text-decoration: none;
color:white;
}
a:visited
{
text-decoration: none;
color:FFFFFF;
}
a:hover
{
text-decoration: none;
color:blue;
}
a:active
{
text-decoration: none;
color:blue;
}
Any help appreciated.
Thanks,
Robert.
You need to finnish the text-decoration instruction :P
text-decoration: none;
or
text-decoration: underline;
I hope you need to change the color in hover state
Try something like this one
eg.
HTML
<a href ='#'> Hover Me </a>
css
a
{
text-decoration: none;
color:#000000;
}
a:hover
{
color:#3399FF;
}
Your might be transitioning from a:active to a:hover, which has the same color. Therefore you see no difference. Try setting a unique color for a:hover, and see what happens.
It would also help if you make a jsfiddle.
Your issue is in the text-decoration: parts, if you remove them or use a valid syntax your CSS should work.
I see there's this tag in Blogger:
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
But if I change a:link to text-decoration:underline, then EVERY link in the entire blog becomes underlined which is not what I intended. I just need links inside articles/posts to be underlined. Everything else stays the same.
You can target the links inside the posts using descendant selector.
.post-body a:link {
text-decoration: underline;
}
In the above code, replace .post-body with the ID/Class of the article/post. Most probably it is .post-body by default.