how to put a css class inside of a css class?

Question

.mac{margin-left:auto; margin-right:auto;}

.table{.mac; color:red;}

I want to be able to do that, it doesn't make sense to me why I would need to do:

.table{margin-left:auto; margin-right:auto; color:red;}

I know for the table I could do:

<table class="table mac">

or just type the .table{margin-left:auto; margin-right; color;} like above but that seems redundant.

Is there some way to do what I'm trying to accomplish in my first statement, is there some special syntax that I'm not aware of to make this work?

David · Accepted Answer · 2009-12-21 16:27:18Z

8

You can combine multiple CSS selectors on the same line with a comma:

.mac, .table
{
    margin-left:auto;
    margin-right:auto;
}

.table
{
    color:red;
}

answered Dec 21, 2009 at 16:27

David

34.6k3 gold badges65 silver badges80 bronze badges

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

6 Comments

payling Over a year ago

Yes... I gave an example of that above when I wrote <table class ="mc table"> This is not what I'm trying to acomplish.

Aaron Over a year ago

What you're trying to accomplish doesn't work. This answer is correct and makes way more sense than trying to nest CSS classes.

payling Over a year ago

That answer is NOT correct for what I'm trying to do. David simply posted a solution to another problem. Nesting CSS does make sense. For instance, maybe I don't want to have to write margin-left:auto; margin-right:auto for every page specific class instead just nest the .mac class and I don't want to have a global style sheet with 100s of classes refering to margin-left:auto; margin-right:auto; on a single line. You could techinically do it that way but to me it's messy and possibly only a few of the classes specified would be global classes. I hope this helps explain my reasoning.

Mark Schultheiss Over a year ago

I am with Tegeril and David here - in essence the answer IS nesting them - by referencing them. SO you either reference them in the html as you indicate or in the .css as the answer indicates depending on how you wish to construct your .css and html - if you have multiple tables, or if you other design considerations. The comma list is the "nesting" you desire really.

Mark Schultheiss Over a year ago

One other side note: table.table {} form also works for ONLY tables with .table class

|

mrvisser · Accepted Answer · 2009-12-21 17:13:25Z

7

The short answer is no, you can't "include" other CSS classes or "inherit" them so to speak.

There are tools you can use to abstract that kind of stuff for you, though. LESS comes to mind. I think the "mixin" is what you're looking for.

Here is a code sample from the LESS front page:


.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

edited Dec 21, 2009 at 17:13

answered Dec 21, 2009 at 17:06

mrvisser

9445 silver badges9 bronze badges

1 Comment

payling Over a year ago

This is exactly what I was looking for, finally! Thanks BranTheMan.

Jake McGraw · Accepted Answer · 2009-12-21 16:27:21Z

2

.table, .mac {margin-left:auto; margin-right:auto;}
.table {color:red;}

answered Dec 21, 2009 at 16:27

Jake McGraw

56.2k10 gold badges52 silver badges63 bronze badges

3 Comments

Jonny Haynes Over a year ago

why did somebody, mark this answer down? it's exactly the same as the first answer, just more compact ... there is nothing wrong with having your code on one line.

Mark Schultheiss Over a year ago

Yes, for production this is great, for development, I prefer the other form, but either works.

Jake McGraw Over a year ago

oh man, I was hoping for my Peer Pressure badge :-P, I submitted this answer about 3 seconds after David, maybe they thought I just copied it?

Bögözi · Accepted Answer · 2009-12-21 17:42:36Z

1

i depends what do you wanna do. in your case: - if you wanna use the CLASS table you can use .table - for CLASS mac you can use .mac -and yes You can combine them with a comma : .table, .mac - this is usually used if you put the same style for both of the classes.

BUT - if you wanna put style on the CLASS .mac which is in a table then this will help You:

table .mac{} - notice that I didn't use comma, just a space...this way You define the CLASS .mac inside the table..but not the CLASS .mac which is outside of the table

good luck

answered Dec 21, 2009 at 17:42

Bögözi

2842 silver badges17 bronze badges

Collectives™ on Stack Overflow

how to put a css class inside of a css class?

4 Answers 4

6 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related