CODEWITHSUNDEEP
csscss-selectors
jcroll
jcroll

Reputation: 7155

Is it possible make a CSS rule that combines two or more other CSS rules?

For instance:

.strong {
        font-weight: bold;
}
.italicized {
        font-style: italic;
}
.strong_and_italicized {
        .strong;
        .italicized;
}

I ask because I'm working on some jquery that is manipulating some DOM objects that have been assigned multiple different classes from the jquery ui theme css file. It seems to me it would be much easier to combine the multiple classes into one class and then I could just refer to that class in the javascript code when trying to select the DOM object.

Upvotes: 1

Views: 3296

Answers (4)

aries
aries

Reputation: 64

You might want to try adding a comma to each of the CSS rule inorder to group them

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

With pure CSS there's no way of combining two other existing rules.

If you need to combine two css rules, just use both classes on the element:

.foo {
  color: #F00;
}
.bar {
  font-size: 10px;
}

<div class="foo bar"></div>

With CSS you can chain selectors:

.foo.bar {
  color: #0F0;
  font-size: 10px;
}

And jQuery will select elements with chained classes too:

$('.foo.bar').do(stuff);

Additionally, don't ever write classes that imply style. It's not semantic and makes for a harder time when you want to reuse your HTML but change your css.

Something like:

.italicized {
  font-weight: bold;
}

wont make sense, whereas:

.title {
  font-style: italic;
}

has no implication for styling.

Upvotes: 4

Frederik Wordenskjold
Frederik Wordenskjold

Reputation: 10221

You can do exactly that with Less CSS. It even uses the syntax in your example.

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

The only way to combine CSS classes into one like that, that I know of, is to use a CSS pre-processor like LESS or SASS.

If you don't want to use that, I'm afraid you have to assign both classes separately.

Upvotes: 7

Related Questions