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
Related
This question already has answers here:
Sass Nesting for :hover does not work [duplicate]
(2 answers)
Closed 3 years ago.
I have *.scss file in an Angular 7 project.
After compiling it, the compiler adds unwanted whitespace to the css, which leads to wrong results in the UI.
To reproduce the error go to...
https://www.sassmeister.com/
...copy and paste the following code.
$color-background-default: white;
$color-foreground-default: black;
$color-background-disabled: #d3d3d3;
$color-foreground-disabled: #808080;
$color-background-mouseover: #00a7dc;
$color-foreground-mouseover: white;
$color-background-mousedown: #00467F;
$color-foreground-mousedown: white;
.Tab
{
background-color: $color-background-default;
color: $color-foreground-default;
:hover
{
background-color: $color-background-mouseover;
color: $color-foreground-mouseover;
}
:active
{
background-color: $color-background-mousedown;
color: $color-foreground-mousedown;
border-color: $color-background-mousedown;
}
}
In the CSS box of Sassmeister you should see, that there are whitespaces between ".Tab" and "hover" and "active" that look like this:
.Tab {
background-color: white;
color: black;
}
//WHITESPACE AFTER Tab
.Tab :hover {
background-color: #00a7dc;
color: white;
}
//WHITESPACE AFTER Tab
.Tab :active {
background-color: #00467F;
color: white;
border-color: #00467F;
}
Now when I remove the whitespaces between Tab and hover and active it looks like this:
.Tab {
background-color: white;
color: black;
}
//NO WHITESPACE AFTER Tab!
.Tab:hover {
background-color: #00a7dc;
color: white;
}
// NO WHITESPACE AFTER Tab!
.Tab:active {
background-color: #00467F;
color: white;
border-color: #00467F;
}
The second option without whitespaces gives me the correct UI result.
My question: How can I avoid these whitespaces in Angular 7?
The parent selector, &, is a special selector invented by Sass that’s
used in nested selectors to refer to the outer selector. It makes it
possible to re-use the outer selector in more complex ways, like
adding a pseudo-class or adding a selector before the parent.
(from SASS official documentation)
So when you write rules for pseudo-class (before, after, hover, active etc.), to refer to the outer selector (only one level higher), put the ampersand like this:
.link {
color: blue;
&:hover {
color: green;
}
}
So, your SCSS code can be rewritten as:
$color-background-default: white;
$color-foreground-default: black;
$color-background-disabled: #d3d3d3;
$color-foreground-disabled: #808080;
$color-background-mouseover: #00a7dc;
$color-foreground-mouseover: white;
$color-background-mousedown: #00467F;
$color-foreground-mousedown: white;
.Tab
{
background-color: $color-background-default;
color: $color-foreground-default;
&:hover
{
background-color: $color-background-mouseover;
color: $color-foreground-mouseover;
}
&:active
{
background-color: $color-background-mousedown;
color: $color-foreground-mousedown;
border-color: $color-background-mousedown;
}
}
You're looking for the sass ampersand.
.Tab {
:hover {
...
}
}
...should be:
.Tab {
&:hover {
...
}
}
& means: "current selector". You use &:hover to specify
#{currentSelector}:hover.
Without the ampersand, it results into #{currentSelector} :hover and that's the way you want it to work for constructs like
.a {
.b {
...
}
}
... which parses as .a .b {...}.
A more ample explanation here.
Note: the ampersand also allows specifying a prefix to current selector. For example:
.a {
.b {
prop: value;
.c & {
prop: otherValue;
}
}
}
will parse into:
.a .b { prop: value; }
.c .a .b { prop: otherValue; }
I'm trying to get the output:
#parent a:hover,
#parent a:link,
#parent a:visited {
color: #000;
}
I am using this LESS:
#parent {
a {
:link, :hover, :visited {
color: #000;
}
}
}
it's not working.
You need to use the LESS parent selector &:
#parent a {
&:link, &:hover, &:visited {
color: #000;
}
}
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;
}
Is there a way of styling links using a id or a class without having to create a new selector for each individual element? for example
something like this or close to this would be preferable
#logo {
a: link {color: black}
a: visited{color: black}
a: hover{color: black}
}
However, the above syntax does not work instead all i can find is
#logo a:hover {
color: black;
}
#logo a:visited {
color: white
}
I feel like there's an easier way than this.
Heres how to do it to all links
I believe it should work:
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Not all browser support the above methodology of separating the tag styles with class or ID when you are dealing with different style in CSS with tag in single page.
One can follow below method:
**If using ID with Field**
a:link#myID {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited#myID {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover#myID {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active#myID {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
**If using Class with Field**
a:link.myClass {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited.myClass {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover.myClass {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active.lx {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
Not directly in css, but there are some projects that extend css
Check out sass:
http://sass-lang.com
I also believe current CSS syntax is not all that optimal. My personal choice is to go with something like LESS where you get much more intuitive and compact syntax to style your work.
With pure CSS you must specify each pseudo-selector but you can group them to apply the same style attributes;
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Beware that The order of link pseudo-classes matters.
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.