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.
Related
When styling links, using pseudos multiple times looks a bit ugly and time-consuming.
Is this possible when styling links or are there any easier and good-looking ways than this?
For example:
a:hover,:visited {
....
}
To keep things readable in CSS is similar to having a long line of code in any other programming language. I tend to rather break multiple CSS selectors into individual lines, so they're readable but still share the same style:
a:hover,
a:visited,
... {
// your styles
}
but when doing the same in any CSS preprocessor i.e. SCSS, you could do this in other ways, but may not be any better than the above.
a {
&:hover,
&:visited {
// basically even more verbose
}
}
or maybe even:
$pseudos: 'hover', 'visited', 'active';
$each $p in $pseudos {
a:{$p} {
// same styles but overall even more verbose
}
}
I would stick to the first one anyway. It's the most terse and readable of all unless of course there would be other styles related to general A element. In this case I'd use second notation, because the parent A style container would contain even more diverse A-related styles. This would be an example:
a {
text-decoration: none;
color: $default;
&.pop-out:after {
// just an example, which I'd rather solve using an icon font
content: '';
display: inline-block;
width: 1em;
height: 1em;
background-image: url(popout-icon.png);
}
&:hover,
&:visited {
// pseudo specials go here.
}
}
First of all, the second part of your selector a:hover,:visited would actually mean this:
*:visited { ... }
So it would not only apply to a tags, but to all tags (although I don't think there are any other tags where visited could apply)
Back to the question, I always group the rules like this:
a:link, a:visited {
[settings]
}
a:hover, a:active, a:focus {
[settings]
}
...and it works well
I had to covert some PSD-s into html, but every page had its own styling so I went forward and made one for each.
The client now requires them to be joined into a single one. Is that possible?
Thanks.
Edit: They don't have unique ID/classes.
Since you converted the PSD's to HTML, I assume you've still got access to the code? In which case, your best best is to give each page a unique identifier (class or ID) at a high enough level that you can specificy with parent / child selectors. Example:
Page 1:
<body id="aboutus">
Page 2:
<body id="services">
You can then target via CSS the elements that are on each page within the same CSS file (the laws of specificity will take effect: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/):
#aboutus h1 {
color: red;
}
#services h1 {
color: green;
}
Option 2 (Credit to Darren Sweeney):
In addition to adding an id / class to the body element I've mentioned above, you can make the process of adding styles for each page a lot easier by using a CSS preprocessing language such as SASS / SCSS. For example:
SCSS:
#aboutus {
h1 {
color: red;
}
p {
font-size: 10px;
}
a {
text-decoration: underline;
.active {
color: #fff;
}
}
}
#services {
h1 {
color: green;
}
p {
font-size: 15px;
}
a {
text-decoration: underline;
.active {
color: #000;
}
}
}
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 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 */
});