CODEWITHSUNDEEP
css
Chomboreco
Chomboreco

Reputation: 87

Call a CSS rule in the statement of another CSS rule?

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

Upvotes: 1

Views: 200

Answers (4)

jcuenod
jcuenod

Reputation: 58375

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;
}

Upvotes: 2

CodingWithSpike
CodingWithSpike

Reputation: 43698

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;
}

Upvotes: 1

Dan Orlovsky
Dan Orlovsky

Reputation: 1095

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.

Upvotes: 4

imbondbaby
imbondbaby

Reputation: 6411

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;
}

Upvotes: 1

Related Questions