I'm having one very difficult time getting :link and :visited to work on my links. I have been searching online for literally hours and read over 20 different instances of the same problem. Bizarrely enough, :hover and :active are working. What is going on?
Here's the code lines in my stylesheet:
H1 { text-align: center; width:1000px; font-size: 30pt; font-weight: bold; }
a.artlinks:link {color:#40C0FF; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:visited { color:#FF00FF; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:hover {color:#98D7F6; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:active {color:#FF0000; text-decoration: none; font-family: Cambria, Arial; }
and when I call it in my .html the code is:
<h1>Hello World!</h1>
Does anyone have a solution and also, a more efficient way to give the common a.artlinks parameters simultaneously? Thanks
Your code needs a bit of a tidy up, but this is how I would do it (edit I removed the width property from the h1 for demonstration purposes).
H1 {
text-align: center;
font-size: 30pt;
font-weight: bold;
}
a.artlinks {
text-decoration: none;
font-family: Cambria, Arial;
color:#40C0FF;
}
a.artlinks:visited {
color:#FF00FF;
}
a.artlinks:hover {
color:#98D7F6;
}
a.artlinks:active {
color:#FF0000;
}
See this jsfiddle: http://jsfiddle.net/lharby/zkb8thck/
As the a class has the same properties, you can define those once in a.artlinks (font-family, text-decoration). The other elements that are unique can then be defined for :hover, :active etc.
Related
Is there a way to structure a css-file in a way like this?:
a:link {
color: red;
font-weight: bold;
a:hover {
text-decoration: none;
font-weight: normal
}
}
So I want a normal link to be underlined and bold, but when I hover over it, it shouldn't be underlined and bold, but it should still have the same color. (This is a simple example just for explanation)
EDIT: I am/was looking for a way without sass or less
a {
color: red;
font-weight: bold;
}
a:hover {
text-decoration: none;
font-weight: normal
}
All a elements will be red and bold. Specifically a:hover elements will also have no text-decoration and the font-weight is overridden to normal. You're not trying to deal with "parents and children" where, just with more specific states of an element.
There is no such thing as inheritance in CSS, but you can do :
a:link, a:hover {
color: red;
font-weight: bold;
}
a:hover {
text-decoration: none;
font-weight: normal;
}
This was partially mentioned in the comments but I believe it deserves its own post.
You'd use SASS (or LESS, but I find the former much easier) to write out your code and then a compiler like Koala to compile it into regular CSS.
This way your code becomes:
a:link {
color: red;
font-weight: bold;
&:hover {
text-decoration: none;
font-weight: normal
}
}
And it will work as intended.
I have a situation that I can't seem to figure out with CSS.
I have a sidebar category menu that I want to be a certain font.. but the other content when it is in the sidebar to be the standard font.
The issue is that the div structure looks like this.
...
<div class="col-left sidebar">
<div id"sidebar-nav" class"block sidebar-nav-left codnitiveSidenavLeft">
<div class="block-title">..</div>
<div class="block-content">
Now what happens is that block-content has a font value in css which is the normal font.. when it is not under the class "block sidebar-nav-left coditiveSidenameLeft" then that is fine.. when it is under the "block sidebar-nav-left coditiveSidenameLeft" class then I want to use a special font called destroyregular.. here is what I have in the css.
.block .block-content {
padding: 5%;
font-family: 'Lato',sans-serif;
/*font-family: "destroyregular";*/
font-size: 100%;
font: bold 12px Arial, sans-serif;
color: #FFFFFF;
text-transform: uppercase;
}
#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft
{
padding: 5%;
font-family: "destroyregular" !important;
font-size: 100%;
/*font: bold 12px Arial, sans-serif;*/
color: #E6E6E6;
text-transform: uppercase;
}
While container class"block sidebar-nav-left coditiveSidenameLeft" does have the destroyregular font, it is overridden by the block-content.. how can I force the destroyregular font down to the block-content only if it is under it?
Thanks in advance..
--Corrected typo in div... side-nav was corrected to sidebar-nav sorry..
--Corrected typo #2!! arrgh.. #sidebar-nav.block.sidebar-nav-left codnitiveSidenavLeft
-Ken
Change the sidebar and .block-content to this:
#side-nav
{
padding: 5%;
font-family: "destroyregular", Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #E6E6E6;
text-transform: uppercase;
}
.block-content {
padding: 5%;
font-family: 'Lato', Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
}
This selector:
#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft
Doesn't select anything in that HTML snippet you posted. The ID and class names don't match.
UPDATE: With the corrected selector, what's going on now is that the font destroyregular is getting applied with very high specificity to the .block, but .block-content will not inherit it over something set specifically for .block-content jsut because the parent has high specificity. This is how I would do it, same HTML and add this CSS:
#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft .block-content {
font-family: "destroyregular";
}
This is not optimal. I think it's overspecified. And probably you can get rid of the font definition on the other (overspecified) selector and move it to that one, but that depends on what you actually need.
(I think I should mention this, I've only recently started using Sass/SCSS)
http://jsfiddle.net/DriftingSteps/t6kLncfm/
You can see how <strong> is inheriting the properties of the global <a> as well as the properties from nested <a> tag.
a {
color: #09f;
text-decoration: none;
&:hover {
text-decoration: underline;
opacity: 0.6;
}
}
ul {
font-size: 0.85em;
a {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
strong {
#extend a;
}
}
I have been going through http://sass-lang.com/ and I know I'm missing something.
What am I doing wrong? Is there a way to inherit properties from the nested <a> only, without the use of classes on either ul a and ul strong? Or is there a better way to do this?
You could use an extend-only selector (%), and extend both ul a and ul strong from that:
a {
color: #09f;
text-decoration: none;
&:hover {
text-decoration: underline;
opacity: 0.6;
}
}
ul {
font-size: 0.85em;
a {
#extend %a;
}
strong {
#extend %a;
}
}
%a {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
You don't have to use that class and you don't have to apply it to your HTML, you can just define it and refer to it when inheriting:
a, .a {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
strong {
#extend .a;
}
Demonstration
And of course, in this case you don't really need extend:
a, strong {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
strong {
// other stuff
}
It seems to me that the real use case of extend isn't deep localized selectors defined together, but rather the extension of a selector defined elsewhere.
I have link CSS define as:
A
{
color: #315393; font-family: verdana; font-weight: 500; text-decoration:underline; font-size: 10px;
}
A:Hover
{
color: #999999; font-family: verdana; font-weight: 500; text-decoration:none; font-size: 10px;
}
However, there are a couple cases where I want a link to act like a button and for that I use bootstrap and give them the class of "btn btn-primary", but since they are still links it seems they are still using the above CSS. How can I exclude the link behavior CSS from these and is there a way to do it in-line to the link?
You can use :not pseudo-class to exclude certain elements from the matched selector:
a:not(.btn.btn-primary) {
color: #315393;
font-family: verdana;
font-weight: 500;
text-decoration:underline;
font-size: 10px;
}
a:not(.btn.btn-primary):hover {
color: #315393;
font-family: verdana;
font-weight: 500;
text-decoration:underline;
font-size: 10px;
}
My CSS has the following code for links for the whole website:
#mainpanecontent A:link {
FONT-WEIGHT: bold; COLOR: #6a0a0a; TEXT-DECORATION: none
}
I want to change a header that is also a link to be a different color using the code below but it doesn't enforce it. My code is inside a div that uses the "mainpanecontent" :
Header code
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
.contact a:link, .contact a:visited
{
color: #1F507F;
}
.contact a:hover
{
color: #1F507F;
}
.contact a:active
{
color: #1F507F;
}
#mainpanecontent A:link has a higher specificity than any of your .contact a:somethings. The best way to solve this is probably to give your header an ID and use that. If you can’t, and it’s only in #maincontent, #maincontent will suffice, even if it’s not entirely appropriate. (Depends on the situation.)
#mainpanecontent .contact a:link {
color: #1f507f;
}
Also, just drop the :link, especially if you’re going to specify the same thing for all of them. (The only consideration there, <a name>, isn’t used these days.)
CSS has a system of priority for handling what gets what tags :: Give this a read
Here is a simple rewrite of your code that should work :)
Everything higher on the list should overwrite things lower of the list of the same type
.contact a:active
{
color: #1F507F;
}
.contact a:hover
{
color: #1F507F;
}
.contact a:link, .contact a:visited
{
color: #1F507F;
}
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
CSS Rules are sometimes not enforced due to how explicit the previous rule was, in the rule you list above it references an ID, which is more explicit than a class.
The other issue of course can be that your "overrides" are defined BEFORE the other rule, therefore they are overwritten.
In the first case you can use !important to force the override of the rule.
e.g.
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
.contact a {
color: #1F507F !important;
}
Note I removed the other rules, because you are only setting the link color to the same color in each case, so there's no need to define the pseudo-classes :hover, :active etc. with the same constant.