Can I call a rule in the statement of another rule if CSS?. Something like this:
.myFirstRule
{
color: white;
}
.mySecondRule
{
width: 1000px;
myFirstRule;
}
Thank you.
Sorry about my english
-
3In CSS, no. However, you can apply styles to more than one selector, such as: .myFirstRule, .mySecondRule {color: white;} Make sure you separate the two selectors with a comma.Dan Orlovsky– Dan Orlovsky2015-05-22 14:09:25 +00:00Commented May 22, 2015 at 14:09
-
1@DanOrlovsky - This should be an answer, not a commentkarthikr– karthikr2015-05-22 14:10:04 +00:00Commented May 22, 2015 at 14:10
Add a comment
|
4 Answers
In CSS, no you cannot. You can, however, apply styles to more than one selector at a time, such as:
.myFirstRule, .mySecondRule { color: white; }
Make sure each selector is separated with a comma, and you're good to go.
2 Comments
Chomboreco
The second Rule is called from another file
Dan Orlovsky
That doesn't matter. Just because a selector exists in one CSS file does not mean it cannot exist in the other.
You can't do this in plain CSS but there are two solutions to your problem:
One: Use multiple selectors
<div class="myFirstRule mySecondRule"></div>
Two: Use SASS (or LESS, I suppose)
.myFirstRule {
color: white;
}
.mySecondRule {
width: 1000px;
.myFirstRule;
}
Alternatively, still with SASS, you could also do this with a mixin:
// Define here
@mixin reusableRule {
color: white;
}
.myFirstRule {
@include reusableRule;
}
.mySecondRule {
width: 1000px;
@include reusableRule;
}
Comments
No, you can't do that in pure CSS.. You can use a comma or , to apply a property to multiple selectors
Try this:
.myFirstRule, .mySecondRule {
color:white;
}
.mySecondRule
{
width: 1000px;
}
1 Comment
Chomboreco
The second Rule is called from another file
This is not possible with normal CSS, but you could try using SASS or LESS instead, which both compile to CSS. They allow this behavior through "mixins".
For example in LESS you could do:
.myFirstRule
{
color: white;
}
.mySecondRule
{
width: 1000px;
.myFirstRule;
}
which would generate CSS:
.myFirstRule
{
color: white;
}
.mySecondRule
{
width: 1000px;
color: white;
}
answered May 22, 2015 at 14:11
CodingWithSpike
43.9k18 gold badges106 silver badges141 bronze badges
2 Comments
Chomboreco
The second Rule is called from another file
CodingWithSpike
LESS and SASS both merge multiple files into a single .CSS file for deployment, so separating the rules into files based on their responsibility is ideal. So yes, LESS and SASS would both allow you to include one rule into another when they are in separate files.