Forums
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
@Paulie_D I think that’s not working properly.
because div choose only one value red because red is first class of this div.
> @Paulie_D I think that’s not working properly. because div choose only one value.
No. It’s only a matter of specificity / order or rules.
so if I have it like this
.flat.red {
background: #bf3f3f;
}
.flat.pink {
background: #bf3fb4;
}
.flat.purple {
background: #963fbf;
}
.flat.blue {
background: #3f3fbf;
}
is there a way so I only have .flat in once and then it applys to the rest so it is not too much repeating
@HugoGiraudel Yes you are right.
`.flat` (as you have used it) will define the size of the element.
`.red` will define the background color
.`flat.blue` defines nothing in and of itself except it only targets elements with **both** classes.
http://codepen.io/Paulie-D/pen/yHAaj
In the example above, try deleting the bg color from `.flat.blue`…only the `.flat` class will apply because no `.blue` class has been defined.
> is there a way so I only have .flat in once and then it applys to the rest so it is not too much repeating
If you’re just looking at saving a way for you to have to write it out, you’ll want to use Sass/Scss:
.flat {
height: 60px;
width: 150px;
&.red {
background: #bf3f3f;
}
&.pink {
background: #bf3fb4;
}
&.purple {
background: #963fbf;
}
&.blue {
background: #3f3fbf;
}
}