I'm trying to take out all the underlines of my visited links on a website. In my CSS file, I put
nav li a:visited {
text-decoration: none;
}
And the term "visited" comes out as white text in Sublime Text, meaning the syntax is not recognized. I tried other pseudo classes too like
a:hover {
color: #FF00FF;
}
And the "hover" is also not recognized. All my other CSS rules are working, by the way. Am I missing something really obvious here?
That is the expected behaviour by default.
You can solve this by writing a custom color scheme or using an existing color scheme that colors the pseudo-class selectors the way you like.
There's no simple way to color the selectors. Extensive documentation on writing color schemes can be found here.
Related
I've used the color attribute in my css in the appropriate div, but it's not changing the color on the screen. Having no idea what's happening, I finally went to Inspect, and there is code showing up I have not included anywhere in my html file. I don't know how it's arrived to be there, and how to override or delete it.
This is the code I'm finding I did not write anywhere:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
It notes "user agent stylesheet," but again, I have not written anything like this. I searched my code for "webkit" just in case, and no results. Please help me understand where this is coming from, and what I can do to change the color (since it's not actually in my code anywhere).
Thank you!
That code is the default style provided by your browser (hence "user agent stylesheet").
You'll have to write your own style for the element if you wish to override it.
In this case:
a {
color: #0066cc;
}
If you wish to style only some of your links, you can add classes to them:
a {
color: #0066cc;
}
a.different-color {
color: #cc1100;
}
A link<br />
A link<br />
A link with different color<br />
A link<br />
In order to avoid the user-agent stylesheet to override your own, be as specific as possible (it is also a CSS best-practice). Specific selectors will avoid side-effects (such as inadvertently styling other elements).
See also this question and answer
Is it possible to tell a link not to change color in CSS and use the default one.
Example
I have a text in red and that text is a link too. Normaly that text will change blue because it's a link, but I want it to stay red.
So is there a global style for a:link to select no color at all ?
Try this in your stylesheet:
a:link {
color:inherit;
}
Note that you then probably should make sure you have some other way to identify links, or your users will be confused. (I.e. don't remove the underlining, too.)
If you want to deal with browsers not supporting inherit, I suppose repeating the definition which originally set your color will do.
As an example, assume the class important should be shown in red:
.important {
color:red;
}
.important a:link {
color:red;
}
But of course it is not nice to have to double all color indications. I assume one could do something in JavaScript (looping through all the a elements and giving them the right class explicitly). (I have no IE available to test this.)
If all of your a tags are contained within a paragraph tag you can just set the color of the a tag to inherit. You could also just set a style for all a tags to have whatever colour the paragraph tag has. A quick warning about inherit, there are older versions of IE which don't support it(IE7 and earlier).
I have edited my custom CSS to include ::selection{color: white; background: #2f3f58;} or multiple similar variations including copy/pasting and then editing code from W3Schools, W3C, stack overflow, and other sites. The code does nothing. I am using the http://alxmedia.se/themes/hueman/ Hueman theme and it has almost the exact same code that seemed to be working. So i copied this code into my custom CSS and edited it and that did not work either. Finally i disabled the theme CSS pertaining to selections. No matter what I do my selection color is the same red set in the theme options menu as a primary color. The hex for that red is not in the theme CSS however except in the commented out selection element that I am replacing. Is there any way to override the highlight color using CSS that is not the ::slection: element or am I using the element wrong?
the code is now
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
much thanks to #citizenen and is wonderful suggestion
That's the right element for selection color. You can use the "!important" property to raise the specificity and force the style over others. Also use "background-color" instead of just "background". Try changing it to this:
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
More on !important here: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
You are missing a closing brace in your CSS file (custom.css) that's preventing styles after that point from applying correctly. In the future, copy your code into a tool like Lint (http://csslint.net/) and it will find the errors for you.
Cheers!
Is it possible to tell a link not to change color in CSS and use the default one.
Example
I have a text in red and that text is a link too. Normaly that text will change blue because it's a link, but I want it to stay red.
So is there a global style for a:link to select no color at all ?
Try this in your stylesheet:
a:link {
color:inherit;
}
Note that you then probably should make sure you have some other way to identify links, or your users will be confused. (I.e. don't remove the underlining, too.)
If you want to deal with browsers not supporting inherit, I suppose repeating the definition which originally set your color will do.
As an example, assume the class important should be shown in red:
.important {
color:red;
}
.important a:link {
color:red;
}
But of course it is not nice to have to double all color indications. I assume one could do something in JavaScript (looping through all the a elements and giving them the right class explicitly). (I have no IE available to test this.)
If all of your a tags are contained within a paragraph tag you can just set the color of the a tag to inherit. You could also just set a style for all a tags to have whatever colour the paragraph tag has. A quick warning about inherit, there are older versions of IE which don't support it(IE7 and earlier).
Question for CSS designers.
How do I add anchor behavior to any css class without "<a href.." attribute. Here is what I mean.
I'm going to have this html code:
<span class="my_link">LINK TO SOMETHING </span>
and this text should have link behavior (visited color, active color and underlining, "pointing hand pointer").
Is it possible to make this in css?
span.my_link { text-decoration:underline; cursor:pointer; }
You could make use of :hover if you want to apply hover styles to it. Though I'm really not sure why you can't use an anchor.
The visited and active color will have to be done in Javascript. The pointer and underline can be done like this:
.my_link { cursor: pointer; text-decoration: underline; }
Unless you put it in an tag, you can not get the visited, active, etc colors without javascript. You can however get the pointing hand cursor, and the ability for it to go somewhere when you click on it. To make it have the correct pointer use this:
.my_link{ cursor: pointer; }
and for the clicking, use.
$(".my_link.").click(function(){
location.href="page";
}