Solved

Inheritance in CSS

Posted on 2001-07-06
13
400 Views
Last Modified: 2008-03-10
Hi all ,
Please forgive me about this question since i'm asking just because I don't have the time to look for the answer and I hope someone will know the answer without spending time on it.

So , for the question  , Is there a way to inhert CSS properties from one class to another ?

For example :

FURNITURE  
  {
  made-off:wood;
  }

DOOR
  {
  typeof: "FUNRNITURE";
  shape:like-square-but-not;
  }

and when using this CSS block , DOOR will be "made-off" wood.

Does someone knows of anything similer ??

Please don't get into the "inherit" peropertie since I am familier with it , and it has nothing to do with my questions.

Thanks in advance,

                  Avner.
0
Comment
Question by:avner
  • 6
  • 4
  • 3
13 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6259948
The short answer is no, but everyone knows I hate short answers.

So while it is not possible to use typing for inheritance, you can
use scoping, which probably already understand:

  .furniture {made-of:wood}
  #door {shape:like-square-but-not}
  .funiture #door {trim-type:brass}

anything with an id of "door" has the shape attribute, but if
contained in an element of class furniture it is also made of wood and
has brass trim.

I'm not sure that is what you are looking for, but that is about as
close as you can get to direct casting of the attributes based on the
value of another class.

HTH

Cd&
0
 
LVL 14

Author Comment

by:avner
ID: 6260224
CD,
your suggested answer is what I already know.
I'm hoping to read something that I didn't know , I will leave this question open a little more and if I won't receive any new insights , I'll accept your answer.
thanks for the help.

avner.




0
 
LVL 8

Expert Comment

by:klykken
ID: 6260455
hmm what about:

.furniture, .door  {made-off: wood;}
.door { shape:like-square-but-not; }

It's not inheritance, just another way of structuring your css rules.
--
klykken
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 14

Author Comment

by:avner
ID: 6260474
klykken ,
This is what I call a new insight !

But...
The reason why I've never tried this way of declaring CSS was because it looks weird to declatre one rule twice.

Are you 100% that on all platforms and all browsers , CSS will allow this usage ?
Have you ever notice anything about it in the W3C CSS recommandation ?


avner.

0
 
LVL 8

Accepted Solution

by:
klykken earned 106 total points
ID: 6260553
avner,
You don't have to be afraid to use this structure of css.
This is called grouping and is quite common.
You would maybe declare a font this way for your site:
body, table, td, div, span, p {font-family:  Arial, Helvetica, sans-serif;}

This is part of the CSS standard as seen here:
http://www.w3.org/TR/REC-CSS2/selector.html#grouping

In the web-development company I work for we use this way of declaring CSS every day, so I think you can relax. Works at least on 4 browsers and up.
Thats the browsers we test our sites on anyway.

--
klykken
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6260575
It's a little strange, but it works in IE.  Don't have Netscrap here to try it but there is no reason for it to not work on any browser that supports CSS.  It is just a different way of building the cascade.  Good approach klykken.  I would never have tried it that way.  Maybe I'm too conventional.

Cd&

0
 
LVL 14

Author Comment

by:avner
ID: 6260577
klykken ,
Thank you very much for our help , although this is not inheritance , this way is good enough to solve my problem since the whole inheritance thing came originally from the fact that I wanted to be able to declare a "all-around-font"

and I can achive this using the grouping thing.

0
 
LVL 14

Author Comment

by:avner
ID: 6260583
btw - Cd , thanks for your help, sorry I couldn't help incearsing your points status in this area , I know you need it....:)
0
 
LVL 8

Expert Comment

by:klykken
ID: 6260603
avner, glad to be of quick help, and thanx for the A :)
..and don't wory about COBOL, he has enogh points already ;-)

cobol: I tried some solutions with wildcards (*) until it finally struck me to use grouping this way, funny how CSS let you conceptually find different solutions to things. I would never have thought of the set of rules in your first comment.
--
klykken
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6260627
I think I have gotten to a leve where points are not real important.  Good Qs with interesting ideas is where the fun is.  Thanks for posting this avner it makes a good addition to the PAQ.  This TA is only 1 year old but it has really great solutions in it.

Scoping is something I use all the time, and groupings as well.  I just never thought about declare the same class twice for different attribute sets.  Something else to add to the arsenal. :^)

Cd&
0
 
LVL 14

Author Comment

by:avner
ID: 6260642
I'm happy to see that I am not the only one that learned.

Thanks for your help.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6260655
Hmmm... klykken move up into the top ten with this Q passing several other experts including avner.

Cd&
0
 
LVL 14

Author Comment

by:avner
ID: 6260664
... and is well deserved it....:)
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Font Arial Narrow 1 49
JavaScript/CSS: Detect if hue-rotate supported by browser 1 35
How to make footer stick to bottom 9 27
tiny glitch in my main slider 3 17
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question