I've a button and I wanted to know if it is possible to make the css bellow shorter.
.button a:link, .button a:visited, .button a:hover, .button a:active {
color: #000;
text-decoration: none;
}
I mean maybe:
.button a:* {
color: #000;
text-decoration: none;
}
Maybe there isn't any shorter way, but I just wanted to know.
I found something like this out:
.button a:link:visited:hover:active {
color: #000;
text-decoration: none;
}
But it wasn't working, don't know why..
For information - I've general css for a in the top of the file:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
So the button class a should overwrite the main a css.
.button a is all you need
I always set a default style on a, and target pseudo classes only when I need to have a different effect.
Edit to include fix from comments:
Because a default style for the a element is declared like:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
at the top of the stylesheet, we need to make it body .button a by increasing selectivity we increase the importance of the styles applied.
Here are some things to try
make sure that your stylesheet has a rule for ".button a" - also make sure this stylesheet is included after the global one defining rules for "a".
If that doesn't work, try being more specific, as in: ".button > a", only selecting direct descendants.
If THAT doesn't work, while it's bad practice, you could always mark your styles as important, like so:
color: #fff !important;
this will demand that they are parsed last.
Related
scss
a {
text-decoration: none;
&:active {
color: $color-secondary;
}
&:visited {
color: $color-primary;
}
&:hover {
color: $color-accent;
}
}
css
a:active {
color: #E4E4E4;
}
a:visited {
color: #333;
}
a:hover {
color: #6DB48B;
}
The compiled css only takes the last property into consideration.
How do I use multiple ampersands for an anchor element?
The :active styles fail to show because they get overridden by the styles that appear lower down in your Sass. To fix this, reorder your Sass in this order:
:visited
:hover
:active
I have all links on my site underlined when hovered using the following css:
a:hover {
text-decoration: underline;
}
How can I make a class which will override this?
.footer {
text-decoration: none;
}
Your second selector is less accurate than the first one, therefore it's the first one that is applied.
Plus, you shouldn't target such a wide selector (.footer) in order to only style your links. What you should do is:
.footer a:hover{ text-decoration: none; }
(As I assume that default a state doesn't have a text-decoration: underline;)
This code seemed to fix it although it wasn't working earlier:
a:hover {
text-decoration: underline;
}
.footer a{
text-decoration:none;
}
How could I make the following work?
.menu a {
text-decoration: none;
:active {
color: #666;
}
:link {
color: #666;
}
:hover {
color: #666;
}
}
I know its not valid (or at least id does not work), so how could I fix it? I would like to make it easier for the further programming, so I would like to put :(selector) inside the "a" tag.
Ps.: I really don't want to use SASS or any framework for this.
What you're showing in the code sample is not valid CSS.
I know you mentioned that you do not want to use SASS or any framework, but that's precisely why SASS and other CSS preprocessors (e.g. LESS) were developed. This article contains more information on CSS preprocessors.
Alternatively, you can repeat the "parent" selectors and indent accordingly:
.menu a {
text-decoration: none;
}
.menu a:active {
color: #666;
}
.menu a:link {
color: #666;
}
.menu a:hover {
color: #666;
}
Problem with Chrome when displaying my css styles:
The horizontal nav should have background grey and
text color black but on Chrome get maroon and text white.
On I.E 9 works fine but on Chrome not.
The style for the second nav looks ok.How do I resolve these conflicting styles.
Here is my codepen:
http://cdpn.io/uCgyF
add the shiv to your head
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Add id to the ul and style accordingly as in this fiddle
<ul id="firstNav">
nav #firstNav a:link,a:visited{
color: black;
background-color:grey;
display: block;
}
(skip to the bottom for tl;dr)
When I first loaded your pen, I saw things correctly. But then I clicked on one of the header links and saw the behavior you describe. That tells us that a :visited selector is probably the issue. Take a look at your css code (I removed some to help illustrate the point):
nav#navigation a:link, a:visited {
background-color:grey;
color: black;
}
aside a:link, a:visited {
background-color: maroon;
color: white;
}
the comma (,) doesn't do what you think it does. the comma in css is shorthand for writing the same definition twice, so if we didn't have that shorthand, your css would look like this:
nav#navigation a:link {
background-color:grey;
color: black;
}
a:visited { /* <-- oops! */
background-color:grey;
color: black;
}
aside a:link {
background-color: maroon;
color: white;
}
a:visited { /* <-- oops! */
background-color: maroon;
color: white;
}
with your css, every visited link on the entire site (whether it is in your nav or not) will be white on maroon.
as a general rule of thumb, add a new-line after each comma in css. It will help you see these errors more easily.
tl;dr: do this:
nav#navigation a:link,
nav#navigation a:visited {
background-color:grey;
color: black;
}
aside a:link,
aside a:visited {
background-color: maroon;
color: white;
}
I have the following HTML:
Bioshock 2<span> - Xbox 360 review</span>
I'd like to style the first part of the link in one way and the span in another, like this:
I've managed to do this, using the following CSS:
a {
text-decoration: none;
}
a span {
color: #c8c8c8;
}
a:link,
a:visited {
color: #787878;
}
a:hover,
a:active {
color: #fff;
background-color: #a10000;
}
However, it doesn't work as expected when I hover over it:
I'd like the entire link to have the same hover effect and not have the span keep its colour. I'd also like this to happen whether you're hovering over the span or the rest of the link. The desired effect would look like this:
Any ideas how I could do this?
Try:
a:hover, a:active, a:hover span {
// ...
}
instead of:
a:hover, a:active {
// ...
}
Add this css code to it:
a span:hover {
color: #fff;
background-color: #a10000;
}
And here is the demonstration. :)