By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,459 Members | 1,195 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,459 IT Pros & Developers. It's quick & easy.

CSS class hierarchy syntax

Atli
Expert 5K+
P: 5,058
Hi.

Say I have these three classes:
Expand|Select|Wrap|Line Numbers
  1. .Paragraph { width: 200px; margin: auto; }
  2. .Paragraph .Header { display: block; font-weight: bold; }
  3. .Paragraph .Text { display: block; font-size: 90%; }
Is there a way to rewrite that syntax so that I can omit the parent class (.Paragraph) in the last two without making them global?

Like, for example:
Expand|Select|Wrap|Line Numbers
  1. .Paragraph { 
  2.   width: 200px; margin: auto;
  3.   .Header { display: block; font-weight: bold; }
  4.   .Text { display: block; font-size: 90%; }
  5. }
This won't work, but is there something else that might?

I've been trying to search for an alternate syntax, but all I can find are examples of the basic syntax. I even tried going through the W3C documentation but couldn't find anything useful.

I'm just wondering, because I have a lot of classes that need to be nested pretty deep and right now something like 90% of the CSS file seems to be nothing but repeated parent classes. Seems like an awful waste of bandwidth :P
Dec 27 '08 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Yes.



:)

Back in a little bit.
Dec 27 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
You can look into selectors but I'm not sure you'll find much relief. Classes are meant to be somewhat global themselves so if you are getting where a class in one instance is different than all other classes, then you should be using an 'id'.
Dec 27 '08 #3

Atli
Expert 5K+
P: 5,058
Thanks for that.

It's not that the classes themselves are unique to an instance. It's more, I have a lot of very similar, if not identical, HTML and CSS class structures whose only difference is the CSS styles.

Like, for example, blog entries and news entries. Those are basically the same things, except that the CSS *styles* are different. I reuse the HTML for both, only swapping out the root CSS class.

Many of the deeply nested classes are unique to the root class tho, so I could probably use the wild-card char to cut down the repeating classes a lot.

That is:
Expand|Select|Wrap|Line Numbers
  1. .something { color: #00F; }
  2. .root1 .first .second .third .something { color: #F00;  }
  3. .root2 .first .second .third .something { color: #0F0 }
  4.  
Could in many cases turn into:
Expand|Select|Wrap|Line Numbers
  1. .something { color: #00F; }
  2. .root1 * .third .something { color: #F00;  }
  3. .root2 * .third .something { color: #0F0 }
  4.  
That might cut down the size of the CSS file a bit.
Dec 28 '08 #4

drhowarddrfine
Expert 5K+
P: 7,435
Or #something1 and #something2 and move the common attributes further up the cascade but without the big picture it's hard to say. Selectors might be more your answer, don't know.
Dec 28 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.