#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    3
    Rep Power
    0

    Exclamation 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
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    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.
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    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.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    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/...tml#adef-class)

    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

IMN logo majestic logo threadwatch logo seochat tools logo