ansaurus

Question

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

Answer 1

+7 A:

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

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

.table
{
    color:red;
}

David 2009-12-21 16:27:18

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

payling 2009-12-21 16:37:22

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

Tegeril 2009-12-21 16:39:09

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.

payling 2009-12-21 16:54:29

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 2009-12-21 16:54:43

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

Mark Schultheiss 2009-12-21 16:57:54

“Nesting CSS does make sense”In an alternative universe where CSS is a different language, yes. It’d be great if there were more options for reducing duplication in CSS, but there aren’t. David’s given you the nearest solution that CSS actually has.

Paul D. Waite 2009-12-21 17:46:48

Answer 2

+1 A:

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

jakemcgraw 2009-12-21 16:27:21

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.

Jonny Haynes 2009-12-21 16:41:16

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

Mark Schultheiss 2009-12-21 16:56:05

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?

jakemcgraw 2009-12-21 18:10:19

Answer 3

+4 A:

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

BranTheMan 2009-12-21 17:06:13

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

payling 2009-12-21 17:37:25

Answer 4

A:

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

waaab crew 2009-12-21 17:42:36

ansaurus

tags:

views:

answers:

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

related questions