Here's the sample:
.my-class {
font-size: 12px;
}
.my-another-class {
/* here I want to include .my-class style */
.my-class;
border: 0;
}
Can I include one css class into another or not?
Asked
Active
Viewed 97 times
0
Mikhail Kopylov
- 2,008
- 5
- 27
- 58
-
goo..... SCSS LESS SASS? http://stackoverflow.com/questions/11084757/sass-scss-nesting-and-multiple-classes – Roko C. Buljan Sep 19 '14 at 13:49
-
1No, you can't do that in plain CSS. You can however apply multiple classes to any element. – j08691 Sep 19 '14 at 13:49
-
You can set multiple selectors like: .my-another-class, .my-class {} – TheFrozenOne Sep 19 '14 at 13:50
-
Maybe you're not thinking this through... This is meant to be achieved by setting both classes on the element: ``. It would inherit both styles. – LcSalazar Sep 19 '14 at 13:51
3 Answers
3
You can define multiple targets for the .my-class rule, then specify further rules just for .my-another-class:
.my-class,
.my-another-class {
font-size: 12px;
}
.my-another-class {
border: 0;
}
You can even then override certain properties, for example
.my-class,
.my-another-class {
color: red;
font-size: 12px;
}
.my-another-class {
border: 0;
color: blue; /* overrides color: red; on .my-another-class */
}
Joe
- 15,669
- 4
- 48
- 83
-
Oh, thank you! That's I want. Could you tell me, is this a good practice to do this way? – Mikhail Kopylov Sep 19 '14 at 13:52
-
It's perfectly acceptable, everyone does it all the time and I've never heard any good reason not to. SCSS or LESS are **better** options because they give you much more power, but they're also a lot more complicated. For a vanilla CSS solution, there's no problem doing this – Joe Sep 19 '14 at 13:53
0
You can't, but you can do something like this:
.my-class, .my-another-class{
font-size: 12px;
}
.my-another-class {
border: 0;
}
Florin Pop
- 5,105
- 3
- 25
- 58