56

I am a CSS newbie. I am just wondering, is that possible to include one common class into another class?

for example,

.center {align: center};
.content { include .center here};

I came across css framework - Blueprint. We need to put the position information into HTML, e.g.

<div class="span-4"><div class="span-24 last">

As such, we will place the positioning attribute inside html, instead of css. If we change the layout, we need to change html, instead of css.

That's the reason I ask this question. If I can include .span-4 into my own css, i won't have to specify it in my html tag.

Improve this question
2
  • Is it something wrong with answers? Commented May 25, 2012 at 17:27
  • more than anything i found this would be very helpful, in terms of background colors, but we are left to do things the hard way. T.T Commented Sep 9, 2016 at 2:37

3 Answers 3

Reset to default
45

Bizarrely, even though CSS talks about inheritance, classes can't "inherit" in this way. The best you can really do is this:

.center, .content { align: center; }
.content { /* ... */ }

Also I'd strongly suggest you not do "naked" class selectors like this. Use ID or tag in addition to class where possible:

div.center, div.content { align: center; }
div.content { /* ... */ }

I say this because if you do your selectors as broad as possible it ends up becoming unmanageable (in my experience) once you get large stylesheets. You end up with unintended selectors interacting with each other to the point where you create a new class (like .center2) because changing the original will affect all sorts of things you don't want.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I strongly disagree with the avoidance of naked class selectors. In all my years of CSS, I have never had a problem with naming two conceptually distinct classes the same. If you do, then a) you can easily change one name and b) specifying element names will not solve the problem, merely make it less predictable, and by extension, harder to diagnose and solve, because most of the time, the elements won't match, so the bug will only show up some of the time. The real problem is using class names like "center".
I have to agree partially with both cletus and Thom. First off, classes like "center" describe how it should look, not what it is, and should be avoided. Semantic class names like "content" are a far better choice. Now, as to using broad (or "naked") selectors, I have to agree with cletus -- it really is a recipe for disaster. Firebug has made identifying the bugs easier, but if you have ten <div> s each with a different semantic meaning, then each one should have it's own class. If they share display properties, then use a multiple selector (e.g. div.content, div.author_name { } )
15

In standard CSS, it's not possible to do this, though it would be nice.

For something like that you'd need to use SASS or similar, which "compiles" to CSS.

Improve this answer

1 Comment

+1 These systems merely make writing CSS a bit easier - they all end up as normal CSS.
15

This is where the Cascading in Cascading Style Sheets comes in to play.

Think of your html element or widget/module (group of nested html elements) as an object. You know you're going to have objects that share the same properties so you'll want to create a reusable class they can utilize.

.baseModule {align: center;}

Say your module is a message (error, flash...). So you "extend" or "include" your .baseModule class because all messages will be center aligned (see final html example).

.message {border: 1px solid #555;}

Furthermore you want your error messages to have a red background. Additionally you can overwrite the border property from .baseModule.message here if you wanted it to be a different color or something.

.error {background-color: red;}

So now you have a few css definitions that can be reused with ease.

<!-- Regular message module -->
<p class="baseModule message">
    I am a regular message.
</p>

<!-- Error message module -->
<p class="baseModule message error">
    I am an error message. My background color is red.
</p>

To relate this to your question you'd basically leverage multiple class names for maximum reusability. Granted ie6 doesn't support chained selectors (class1.class2.class3), but it's still a neat trick!

Improve this answer

1 Comment

But to keep the HTML code (specifically the class attribute) tidy, it would be nice if cascading (inheritance) were possible in the CSS definition.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.