Is it possible apply style to all of an anchor tag's pseudo selectors with CSS or Sass?
Something like
a:* {
color: #900;
}
instead of
a {
&:hover, &:link, &:active, &:visited {
color: #900;
}
}
I just want to reset standard styling. In CSS, the wildcard can be used to apply styles to all elements... but how about to all pseudo-selectors?
Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector. This means your syntax is correct according to CSS2.
If you're talking about pseudo-classes, then yes, you can combine them in any order.
Pseudo Class Selectors When utilizing & in Sass, a single declaration block can be written for <a> . Then from within the block, <a> can be referenced with &:hover , &:active , and &:focus . These pseudo selectors are just the beginning though, :nth-child , :target , :checked , and many more await.
They can be used for styling visited and unvisited links differently. They can be used for styling an element when it gets focus. Answer: They can be used for styling an element when you hover mouse on it.
Short Answer: No, not directly
However, a mixin could be used to have a similar effect.
// Sets the style only for pseudo selectors
@mixin setLinkSelectorStyle {
&:hover, &:link, &:active, &:visited {
@content;
}
}
// Sets the style to pseudo selectors AND base default anchor
@mixin setLinkStyleAll {
&, &:hover, &:link, &:active, &:visited {
@content;
}
}
a {
color:red;
@include setLinkSelectorStyle {
color:gold;
}
}
a.specialLink {
@include setLinkStyleAll {
color:purple;
}
}
[Example using http://sassmeister.com/ compiled SASS]
a {
color: red;
}
a:hover, a:link, a:active, a:visited {
color: gold;
}
a.specialLink, a.specialLink:hover, a.specialLink:link, a.specialLink:active, a.specialLink:visited {
color: purple;
}
<a>Normal anchor, No href (:link won't work, but other selectors will)</a>
<hr />
<a href="#">Normal anchor</a>
<hr />
<a class="specialLink">Specific class (no href)</a>
<hr />
<a class="specialLink" href="#">Specific class</a>
The mixins will create a rule for all the pseudo selectors when the mixin is included on the anchor / class.
Removed old answer, look at history to see it.
U can do it like that:
&:before, &:after {
content: 'a';
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With