extendable CSS classes

Dev Shed Forums Sponsor:

October 1st, 2003, 12:43 PM

ducken

Junior Member

Join Date: Jun 2003

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

extendable CSS classes

Hello people,

sorry for the not very descriptive subject but there is something about css i really miss. It would be great to be able to extend css-classes but there is no way except a little "hack" that can be used.

what i would like to do is :

PHP Code:


		
			
<style>



.classa

{

font-family:verdana;

font-size:9px;

etc;

}



.classb [I]extends[/I]  classa

{

text-decoration:underline;

etc.

}

</style>

unfortunately this wont work and is afaik not implemented in CSS. But i found the following to work well --- only in IE

PHP Code:


		
			
<div class="classa classb">BLA</div>

both classes are now used, but the second overrides all properties from the first one. They have to be separated by a single space. I dont know wether this mutliple class feature is wanted in the specs but IE does it after all. Of course Gecko (aka. Mozilla/Netscape) wont so you maybe should make different css-files for the browsers if you want to use this very special feature to keep your css small and lightweight.

Hope someone can use this

so far,

ducken

ps. used php-tags to make the code nice

October 1st, 2003, 01:54 PM

jharnois

mod_dev_shed

Dev Shed God 19th Plane (14000 - 14499 posts)

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,299

Time spent in forums: 1 Month 1 Week 2 Days 1 h 54 m 17 sec
Reputation Power: 760

Code:

.classA
  {
  /* CSS definitions */
  }
.classB
  {
  /* CSS definitions */
  }

Code:

<div class="classA"><span class="classB">foo</span></div>

__________________
# Jeremy

Explain your problem instead of asking how to do what you decided was the solution.

October 1st, 2003, 04:49 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,541

Time spent in forums: 1 Month 2 Days 1 h 27 m 15 sec
Reputation Power: 597

Actually it should work in all css cognizant browsers. This code is tested in Moz, Opera and IE

Code:

<html>
  <head>
    <title>Class Extensions</title>

    <style type="text/css">

      .classA {color: red;}

      .classA span {background-color: #080;}

      .classB {text-decoration: underline;}

    </style>

  </head>

  <body>

    this is plain
    <div class="classA">this is just red</div>
    <div class="classA">this is red <span>with a green background</span>.
      <div class="classB">this is red and underscored.
      </div>
    </div>

    <div class="classA classB">this is <span>combined</span></div>

  </body>
</html>

here are a variety of ways to get the effect. One of the tenets of CSS is inheritance.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

Ask a better question, get a better answer.

October 1st, 2003, 04:55 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,622

Time spent in forums: 3 Weeks 6 Days 2 h 18 m 25 sec
Reputation Power: 548

http://www.xs4all.nl/~ppk/css2tests...pleclasses.html

October 1st, 2003, 04:55 PM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 17 h 34 m 25 sec
Reputation Power: 9

The 'hack' you describe is in complete accordance with the HTML4 specification of the 'class' attribute:
"This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters."
(http://www.w3.org/TR/html401/struct...html#adef-class)

Quote:

Of course Gecko (aka. Mozilla/Netscape) wont

This is simply false. Mozilla does support this (and even for a long time: at least as far back as Milestone 4, released more than 4 years ago).

Jeroen

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: