SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Atlanta, GA, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Are CSS classes "real" in an object oriented sense?

    Can one CSS class inherit the definitions of other classes. Note: I am not talking about the inheritance mechanism used to determine what style to use at a given point in the document but in the actual CSS class definitions.

    Example: If I want to define two box classes that are very similar but have a few things different do I then need to (redundantly) put in the common styles for both?

    .Box1
    {border-width:3px; border-color:white; color:black}
    .Box2
    {border-width:3px; border-color:white; color:red}

    I'd rather define a generic box defining the border-width and border-color and then inherit that in a child class that defines the "color" property. Is this possible?
    Claus
    www.photoedits.com - Photo Restoration Services

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure. define the generic class definition and then assign individual elements an id with the specifics.

    Sketch
    Aaron Brazell
    Technosailor



  3. #3
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I believe this is needed, because it is impossible to assign two classes to one tag. Therefore one could not create a generic class and a child class and refer to those both.

    What you could do is this: Let's say I have three input boxes. They all have the same general lay-out, I just want one to have a border, and the others shouldn't have a border.
    I would then use this code:

    Code:
    input {
    general layout here;
    }
    
    input.border {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    }
    This can only be done if the box-classes in your example will only be applied to a single sort of tag (for example a textbox), and this tag is not used elsewhere with different lay-out then the general one.

    I hope this makes sense to you .

  4. #4
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Atlanta, GA, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Yeah but...

    That may work in some simple cases but I was looking for a more general approach. Let's say I want to control background-image, border, z-index and positioning. All my boxes share she same border values so I define that in class .GenericBorder. Some boxes share a background-image value but I have about 5 different values used in all. On each individual box (typically a DIV) I want to set z-index and positioning. So I may use the ID approach to handle those very specific things but I'd hate to have to specify the same border values for each class that I need for my different background-image.

    So my real question was if there is any way in which I can make one class definition simply append to another one. Something like this (in pseudo-syntax):

    .Foo {border:...}
    .Bar1 Foo{background-image:img1.jpg} /*border+img1*/
    .Bar2 Foo{background-image:img2.jpg} /*border+img2*/
    Claus
    www.photoedits.com - Photo Restoration Services

  5. #5
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Atlanta, GA, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Hmm...

    My previous reply was for Sketch's idea before I read Mark T's.

    Mark, but does the "input.border" imply that the properties from "input" also take effect. I just tried this and either I am not doing it right or it doesn't work If I make a <div class="input.border"> it simply ignores my class and if I do just <div class="border"> it does not pick up the definitions from the "input" class.
    Claus
    www.photoedits.com - Photo Restoration Services

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, yes it should be that way. But you are making one slight mistake. All the things that go before the period are HTML-tags, like <input> or <p>. You don't need to specify those in your class-attribute.

    Take a look at the following styles:

    Code:
    p {
    font-family: Verdana;
    }
    
    p.centered {
    text-align: center;
    }
    All the content between the <p> and </p> tags will be placed in Verdana. Whenever the class=centered attribute is added to <p> the text will also be centered.

    So in my example with the input tags, all the input tags will be given the general layout -- without them being assigned a class -- and only those that have been assigned the class=border attribute will be given a border.

    I hope this clears it up .

  7. #7
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Atlanta, GA, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'll answer my own question

    Ok, I figured it out:

    The example I mentioned in "Pseudo" code was:
    .Foo {border:...}
    .Bar1 Foo{background-image:img1.jpg} /*border+img1*/
    .Bar2 Foo{background-image:img2.jpg} /*border+img2*/

    The way to write it is:

    .Bar1, Bar2 {border:...}
    .Bar1 {background-image:img1.jpg} /*border+img1*/
    .Bar2 {background-image:img2.jpg} /*border+img2*/

    Not really class inheritance but at least it avoids that I define the border properties in more than one location using this "additive semantics".

    Thanks for your response
    Claus
    www.photoedits.com - Photo Restoration Services


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •