How to make :hover work in less?
I need to change a button bg-color on hover and I wrote the following code:
.actions-toolbar {
.primary {
display: inline-block;
button{
text-transform: uppercase;
&:hover {
background-color: #df2423;
}
}
}
}
Unfortunately it doesn't work
Look at the resulting CSS and if that makes sense compared to your HTML structure.
Resulting CSS for your Hover-Style will look like this:
.actions-toolbar .primary button:hover { background-color: #df2423; }
One thing I always recommend when writing LESS or Sass or equivalent preprocessor languages: (very) careful with the nesting, it can cause irritiation and problems (very) often!
Related
I am trying to add a focus styling to an element. However, I have ::focus and a class .focus. Since I'm using SASS thought it would be easier to create my own style value then #extend it to the two focuses to save on coding.
But whenever I write it, it isn't working and the styling just doesn't appear. If any one has any ideas as to why it would be greatly appreciated thanks.
Heres a small example of the code I've got.
%button-styling {
color: $grey;
%btn-focus {
color: $white;
}
&::focus,
&.focus {
#extend %btn-focus;
}
}
As Sass docs said, any complex selector that even contains a placeholder selector isn't included in the CSS .... So it is not meaningful to put %btn-focus inside %button-styling placeholder. For me these styles in a scss file work fine:
$grey: red;
$white: #FFF;
%btn-focus {
color: $white;
}
%button-styling {
color: $grey;
&:focus,
&.focus {
#extend %btn-focus;
}
}
button {
#extend %button-styling;
}
And in your html you may have something like this:
<div>
<button class="focus">btn-focus</button>
</div>
<!-- or -->
<div>
<button>btn-focus</button>
</div>
Can I do something like the following?
.class1{some stuff}
.class2{class1;some more stuff}
Update 1: There is a CSS3 spec for CSS level 3 nesting. It's currently a draft.
https://tabatkins.github.io/specs/css-nesting/
Update 2 (2019): We now have a CSSWG editors draft
https://drafts.csswg.org/css-nesting-1/
Update 3 (2022): We now have a W3C First Public Working Draft https://www.w3.org/TR/css-nesting-1/
If approved, the syntax would look like this:
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
.foo {
color: red;
#nest & > .bar {
color: blue;
}
}
.foo {
color: red;
#nest .parent & {
color: blue;
}
}
Not possible with vanilla CSS. However you can use something like:
Sass
Sass makes CSS fun again. Sass is an
extension of CSS3, adding nested
rules, variables, mixins, selector
inheritance, and more. It’s translated
to well-formatted, standard CSS using
the command line tool or a
web-framework plugin.
Or
Less
Rather than constructing long selector
names to specify inheritance, in Less
you can simply nest selectors inside
other selectors. This makes
inheritance clear and style sheets
shorter.
Example:
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Not with pure CSS. The closest equivalent is this:
.class1, .class2 {
some stuff
}
.class2 {
some more stuff
}
Not directly. But you can use extensions such as LESS to help you achieve the same.
No.
You can use grouping selectors and/or multiple classes on a single element, or you can use a template language and process it with software to write your CSS.
See also my article on CSS inheritance.
I do not believe this is possible. You could add class1 to all elements which also have class2. If this is not practical to do manually, you could do it automatically with JavaScript (fairly easy to do with jQuery).
If you cannot wait until native CSS nesting goes official, you can use Container Queries to do it. As of now, it is supported (partially) by Chrome & Edge 105+, as well as Safari 16+.
It will looks like this:
.class1 {
container-type: inline-size;
container-name: my-container;
// other style rules
}
#container my-container (min-width: 0px) {
.class2 {
// some style rules
}
}
More details can be found at here.
Try this...
Give the element an ID, and also a class Name. Then you can nest the #IDName.className in your CSS.
Here's a better explanation
https://css-tricks.com/multiple-class-id-selectors/
If for example, I have a lot of CSS styles that only have to apply to objects within a div #container. Is it possible to instead of write #container in front of all, have another type of selector? So I don't have to write it for EVERY object within the div #container?
HTML
<div id="container">
<div class="letter">a</div>
<div class="letter">b</div>
<div class="number">1</div>
<div class="number">2</div>
</div>
<div class="letter">c</div>
<div class="number">3</div>
CSS
.letter {
font-size:25px;
color:green;
}
.number {
font-size:30px;
color:red;
}
I want to write a rule for every .letter and .number within #container.
Ofcourse I'm only reproducing my issue here, but is there a possibility to change the rules of .letter and .number so it applies only to #container without having to change it 2 times (2 times in this reproduction)? (In my issue it's about 30 objects).
I tried a #container selector before those rules, but without succes. It breaks the styles.
My CSS attempt:
#container {
.letter {
font-size:25px;
color:green;
}
.number {
font-size:30px;
color:red;
}
}
Does anyone know a solution or do I have to manually apply #container in front of every rule like this (which I want to avoid cause it's a lot of work!):
#container .letter {
font-size:25px;
color:green;
}
#container .number {
font-size:30px;
color:red;
}
YES, CSS is quite stupid and simple, you have no other choose than having #container in front of each class.
BUT
Developers are lazy and created a pre-processing language to add some crazy functionality. Currently, two alternatives : SASS and LESS
But using those technology you can write your styles like this :
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
and then automatically generate a CSS file like that :
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
This is called "Nesting" and is only one of the many stuff you will love.
Which one to use between SASS and LESS ?
They are similar, my recommandation is us an existing framework and look which one is available. For exemple bootstrap use LESS and Foundation use SASS ... but both are quite similar.
I use both daily, and have some preference to SASS, but that my own opinion.
In pure CSS, I can't think of a better way of doing it than what you're already doing - which is a lot of repetitive work as you've pointed out.
Your first "CSS attempt" is the correct approach, but you will have to use SASS or LESS if you want to be able to nest selectors like that. Pure CSS doesn't support it.
I strongly recommand that you look into SASS/LESS, they offer much more than just nested selectors and they will make your CSS coding a lot more enjoyable overall.
CSS is, by design, a very simple language. There is no way (yet) to achieve what you want with pure CSS.
CSS preprocessors such as LESS and SASS have stepped in to help alleviate the tedium of this and other common problems with traditional CSS (such as variables). Your nested example is exactly right in SASS. These all compile to plain old CSS, but will necessitate a change to your front-end build process.
If you can't make use of a preprocessor, find + replace is your friend.
The answer is No.
You can't do that without using a preprocessor like less or sass.
Take a look at SASS for example http://sass-lang.com/guide in the "Nesting" section you can see that's exactly the feature your're looking for.
If you want to try it follow the instructions should be pretty simple.
The same feature is present in the less preprocessor but my opinion is that SASS is much more powerful and flexible so if you have to start from sketch go for this one.
If you can't go for a preprocessor then preceding every selector with #container is the only way you have.
Suppose you have this HTML:
<div class='foo-element-1'></div>
<div class='foo-element-2'></div>
...
<div class='foo-element-500'></div>
CSS:
[class^='foo-'] { font-size: 12px; }
.foo-element-1 { color: red; }
.foo-element-2 { color: blue; }
...
.foo-element-500 { color: green; }
Every .foo-element-### shares a common style in [class^='foo-']
Another way to write this might be:
HTML:
<div class='foo foo-element-1'></div>
<div class='foo foo-element-2'></div>
...
<div class='foo foo-element-500'></div>
CSS:
.foo { font-size: 12px; }
.foo-element-1 { color: red; }
.foo-element-2 { color: blue; }
...
.foo-element-500 { color: green; }
Nothing else uses .foo. All .foo-element-### will have .foo attached to it in this option. Assume that browser compatibility is a non-factor and there are several hundred of these elements that all have a common style.
Is there a reason in terms of performance or semantics to use one style over the other?
Selection by classes is a good deal faster: http://jsperf.com/class-vs-data-attribute-selector-performance
Also, it just plain makes sense to have elements that share common style to share a common class. And if the elements style must deviate from the shared style, a second class on the element also just makes good sense.
Which means class selectors are both faster and more maintainable. There's not much downside here, other slightly more verbose markup. But assuming you are generating these items in a loop in some templating language, you would only need to write that extra class value once and the loop would duplicate it.
So yeah, use the class selector. It's pretty sweet.
I could do something like:
#id1 .class1, #id2 .class1{
color:#FFF;
}
But that seem's bulky, especially if I have a ton of ID's I want to share with 1 class.
I'd much rather do something like:
#id1, #id2 .class1{
color:#FFF;
}
Obviously this doesn't work, but you get my drift.
Thoughts?
EDIT:
Probably should have mentioned I am over-riding CSS framework before I got flamed. Think bootstrap or zurb foundation. That's why there is a need to do this instead of just using a class. I was just wondering if there was any other inheritance selectors I wasn't aware of in native CSS.
You can use a language like LESS which compiles to CSS. Just one of it's many features is that the following LESS:
#id1, #id2 {
.class1 {
color: #fff;
}
}
Compiles to:
#id1 .class1,
#id2 .class1 {
color: #fff;
}
That compilation can be done server-side (lessphp or less.js) or client-side (less.js) depending on your preference/needs.
What about this?
.class1
{
color:#FFF;
}
You're overthinking it. The point of classes is to cover multiple items. all you need to say is:
.class1{
color:#FFF;
}
this only won't work directly in 2 cases.
you have the class appearing elsewhere. Find (or create) a unique element surrounding your classes, such as
ul .class1{
color:#FFF;
}
you have the class showing up on other types of elements. In this case:
li.class1{
color:#FFF;
}
I suggest doing some reading about CSS specificity.
http://css-tricks.com/specifics-on-css-specificity/
First try writing a specific enough selector that will override the CSS framework.
This may involve doing something like
html body .class-i-want-to-override { /* ... */ }
It may require putting an !important on there, although that should be your last resort.
.my-class { color: pink !important; }
Finally I would suggest looking into a CSS preprocessor like SASS. This would allow you to write in a more efficient manner.
#special1,
#special2,
#special3 {
.override {
color: pink;
}
}
Which would get compiled to:
#special1 .override, #special2 .override, #special3 .override {
color: pink;
}
Why not just use a class?
Or apply, in the elements with these ID's, a common class? As a element can have a ID and classes at the same time..
In the code below is a basic example:
#commonClass .class1{
color:#FFF;
}