How to add CSS styles to element via other CSS

Question

I have a certain question about applying styles to an element through another CSS class. To be more specific, lets have a look at following. I have div:

<div class="main"></div>

with some styles:

.main { 
  background: red;
  display: inline;
  /* some other styles */
}

and I want to apply .another class to the div, but via its .main CSS.

.main {
  background: red;
  display: inline;
  .another
}

.another {
  width: 50px;
  height: 100px;
}

I assume that a preprocessor (SASS, Compass, etc.) is needed, but can someone advice if this is possible and what to keep in mind?

Thanks

You can have more than one class on an element so you could write `
` Otherwise you'd need something like sass — gaynorvader, Jan 08 '15 at 10:34
Can I ask why? Surely it would require less to just type width:/height: in the .main class? — Jack hardcastle, Jan 08 '15 at 10:37
thanks for the answers, well basically I cannot change the markup of the HTML. I only can change the CSS. — supersize, Jan 08 '15 at 10:38
If you want to create a new css class but to not add any new classes onto your markup, then `div.main {width: 50px;height:100px;}` is a different way to style the same element without any new classes in your markup, but it would also work if you have the `.main` css class twice in your css file. Both will work. — wf4, Jan 08 '15 at 10:39

Marko Gresak · Answer 1 · 2015-01-08T10:45:06.093

No preprocessor is needed, you can group classes with .class.another, that's the same thing that css preprocessors does.

You can just add multiple classes in html, like <div class="main another and-other">...</div>. In css, you can just group the selectors, the inline order doesn't matter, but it's recommended to use most used class (main) first, and add more specific classes lower. But the order from top to bottom matters, lower in file the selector is, more important it is.

I've created a jsfiddle from your code, take a look. I've added background color so you see the difference, because width and height does not apply to inline elements.

score 0 · Answer 2 · edited Jan 08 '15 at 10:42

0

You can assign multiple class to that div. so you can write like this and can apply class.

<div class="main another"></div>

edited Jan 08 '15 at 10:42

Pete

57,112
28
117
166

answered Jan 08 '15 at 10:38

Jignesh Khokhariya

150
1
8

score 0 · Answer 3 · answered Jan 08 '15 at 10:45

0

You can merge the two styles like:

.main.another {
  background: red;
  display: inline;
  width: 50px;
  height: 100px;
}

answered Jan 08 '15 at 10:45

Chris

453
3
15

How to add CSS styles to element via other CSS

3 Answers3