Without grouping we could do:
.footer_content a:link {
color: #FFFFFF;
}
.footer_content a:visited {
color: #FFFFFF;
}
With grouping:
.footer_content a:link, .footer_content a:visited {
color: #FFFFFF;
}
is there a way to define the css selector to get rid of the extra .footer_content declaration that does the same thing? Something that would looking a bit like this:
.footer_content (a:link, a:visited) {
color: #FFFFFF;
}
There currently is not a universally supported way of achieving that.
However, the experimental :any() selector would make that possible, if it gets implemented and standardised. It is not supported in any browser but the latest Firefox nightlies yet.
You can achieve something kinda similar with Sass, which "compiles down" to CSS.
In Sass you would use nesting, like so:
.footer_content {
a:link, a:visited {
color: #FFFFFF;
}
}
Related
I have an <a> tag
GOOGLE
with following styles:
a {
color: red
}
a:hover {
color: green
}
a:active {
color: blueviolet
}
a:visited {
color: brown;
}
Here is my problem :
a:hover And a:active Are ignored
I Know This Is for Cascade Rules But
I want to know best practice to solve it.
I tried adding !important and it worked as I wanted.
I changed line numbers (because importancy and specification are equal so line number is important) and it worked correctly But I want to know which solution is best !!
adding important is not a good idea in most cases
and line number is changing in development.
Can I have some kind of selector like this?:
a:not(:hover):visited {
color: blue
}
I assumed a:hover and a:active are ignored if the link has been visited. If that is the case, try this:
a {
color: red
}
a:hover,
a:visited:hover {
color: green
}
a:active,
a:visited:active {
color: blueviolet
}
a:visited {
color: brown;
}
GOOGLE
can I have some kind of selector like this ?
a:not(:hover):visited { color: blue }
Yes, you can.
I suggest that you read this Tutorial. According to that one:
In general, the order of the pseudo classes should be the following — :link, :visited, :hover, :active, :focus in order for these to work properly.
so If you change your CSS file to this one it must be worked correctly:
a:link {
color: red
}
a:visited {
color: green
}
a:hover {
color: blueviolet
}
a:focus {
color: rgb(230, 49, 175);
}
If you think that hover and active or ... does not work properly, maybe it is because you have visited the link before. try to change the "href" address to see that they are working.
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
a:link {
color: red
}
a:visited {
color: brown;
}
a:hover {
color: green
}
a:active {
color: blueviolet
}
GOOGLE
See this to know more about link and their states like hover visited order
First, you forgot the semicolon
Second, if !important works, just use it.
Third, I have never met this selector before.
See further about this on W3School
In CSS, I want something like:
:root{
underline-all-h1-tags:true
}
/* it's not all h1 tags, it's actually h1-tags-with-a-bunch-of-other-things".
But for KISS reasons, we'll assume it's just all of them.*/
/* ... lots and lots of other stuff...*/
h1{
if(underline-all-h1-tags == true){
text-decoration: underline
} else {
text-decoration:none
}
}
Is there a way to do this? I know I could just do
:root{h1-underline:underline}
h1{text-decoration:var(h1-underline)}
But I am trying to make my code readable to me-in-10-years-when-I-have-totally-forgotten-how-to-CSS.
why not make use of the cascading part of cascading style sheet?
h1{
text-decoration:none;
}
.underline h1{
text-decoration:underline;
}
Applying the class "underline" to any parent element would do the same thing that it looks like you're trying to describe above.
You could add or remove the underline class with js, or set it statically on elements you want affected.
As an alternative to Kai's answer:
h1 { text-decoration: none; }
.underline { text-decoration: underline; }
.underline is a utility class that can be used to add an underline to any element you want, including an h1. This becomes extremely scalable.
Of course I personally wouldn't name it .underline; I would probably name it something like
.u-td_u (which stands for "utility, text-decoration, underline"). The naming is your choice.
And just for kicks you could also have the other utilities available:
.u-td_n { text-decoration: none; }
.u-td_i { text-decoration: inherit; }
.u-td_o { text-decoration: overline; }
.u-td_l { text-decoration: line-through; }
/* etc ... */
I'll give an example of what I'd like to do.
:all() {
&,
&:link,
&:visited,
&:active,
&:focus
}
The above is an imagining of a 'custom selector' that itself returns a selection of all pseudo-classes of an anchor tag, minus :hover.
I'd like to use it as a selector like so:
.menu {
a.top-level:all, span {
color: #dormant-grey;
}
a.top-level:hover {
color: #off-black;
}
}
And for it to generate:
.menu a.top-level,
.menu a.top-level:link,
.menu a.top-level:visited,
.menu a.top-level:active,
.menu a.top-level:focus,
.menu span {
color: #686868;
}
.menu a.top-level:hover {
color: #22282a;
}
So I hope I'm communicating clearly what the question is. Is there a way to reuse selections?
Note that this is different than passing styles into a mixin. Passing styles into a mixin, to achieve the same thing, would require repeating the styling. Once to pass into the mixin, and then again for all the other selections that the mixin does not handle. Its also what I'm doing now and I'm finding that it isn't worth using the mixin because I've had to repeat myself so many times that I'm just going to pull it out.
So I hope that is clear. I'm asking if there is a way to reuse a selection, not a style. If less can't do it, is there a language that can?
(So to not leave this one w/o an answer - copying my comment above):
.all(#-) {
&,
&:link,
&:visited,
&:active,
&:focus {
#-();
}
}
.menu {
.span {
color: red;
}
a.top-level {
.all({.span});
:hover {
color: blue;
}
}
}
This obviously produces duplicated styles for .span and a.top-level family but as soon as you care and generate a minified CSS version --clean-css --clean-option=--advanced option will eliminate duplicated styles with love.
I have default properties defined for my links like this:
a{
color: blue;
}
a:hover{
color: red;
}
The problem is that I lose the all the hover properties when I do something like this:
#header a{
color: gray;
}
So to keep the hover working as I defined it before in the defaults, I'd have to declare it again:
#header a:hover{
color: red;
}
Is there any way to do this without loosing the original hover action defined?
Unfortunately, if you want it to work in all browsers, you'll have to override it.
a { color:blue; }
a:hover { color:red; }
#header a { color:grey; }
#header a:hover { color:red; }
Example.
Alternatively, you can make use of !important. Usually this is a sign that something weird is going on in your css, but this seems to be the only alternative to duplicating your css.
a { color:blue; }
a:hover { color:red !important; }
#header a:hover { color:red; }
Example.
You could also make use of a css compiler such as sass or less which would let you write it in a manor where you aren't duplicating effort - but that's beyond the scope of this question.
You're over-riding the styles with a cascade. Putting "#header a" gives that style more weight than the original style. You can over-ride it with a !important (although I wouldn't recommend it). Here's an article that explains this concept.
One way you can do this is to specify the default style as !important.
Using !important is usually a sure fire sign that your code can be improved however in this context, and without re-defining the styles, it seems like the best choice (best I know of right now).
a:hover{
color:blue !important;
}
Working Example
Also note that if you do go down the route of using the specific selector that you can combine both selectors together to reduce code duplication.
a:hover, #header a:hover{ color: red;}
I was trying to use a class with psuedo class in the less css mixin
a:link{
color:#138CB4;
text-decoration:none;
}
a:visited{
a:link;
color:#84B6CD;
}
But out put I got is this, which an invalid css
a:link{
color: #138CB4;
text-decoration: none;
}
a:visited{
a: link;
color: #84B6CD;
}
Am I missing something here or mixins don't support pseudo classes yet.
I was a little confused by this at first, too, and found myself jumping through hoops to get it to work. Although your post is old enough that it might pre-date this functionality for all I know.
Anyway, if you're just trying to add additional styles to an existing style via pseudo-selectors, you can use the '&' operator. It works kind of like a 'this' keyword, and turns nesting into a simple combination. So you should be able to do:
a {
color: #138CB4;
text-decoration: none;
&:visited {
color: #84B6CD;
}
}
This should compile out to something like:
a {
color: #138CB4;
text-decoration: none;
}
a:visited {
color: #84B6CD;
}
Note that you can also use the & to combine 'sub-selectors':
.outer {
color: blue;
.error {
//this will select elements that are .error inside-of/descending-from .outer
}
&.error {
//This will select elements that are .outer AND .error
color: red;
}
}
The official definition is unfortunately hiding in plain sight in the Nesting Rules part of the documentation.
I don't believe that is how you use mixin's in Less.
You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn't actually mean anything and is why your are getting that output.
If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:
.link {
color: #138CB4;
text-decoration: none;
}
a:link {
.link;
}
a:visited{
.link;
color: #84B6CD;
}
Not fully sure, what you want to achieve. But if you got tired of :link,:visted,:active (aka normal link) vs. :focus, :hover (hover styles), this works:
.anchor( #- ) {
a, a:link, a:visited, a:active {
#-();
}
}
.anchorH( #- ) {
a:focus, a:hover {
#-();
}
}
for example:
.anchor({
background: #fff;
});
.anchorH({
background: #ddd; /* darken on hover or focus */
});