Define a CSS element as equal to another?

Discussion in 'HTML' started by Noozer, Apr 19, 2006.

  1. Noozer

    Noozer Guest

    Is there a way to refer to another element when defining they properties of
    an element in CSS?

    ie:

    ..tab { display: block; margin:0; padding: 3px; }
    #tab1 { [tab]; background-color: #DDD; }
    #tab 2 { [tab]; background-color: #FDD; }
     
    Noozer, Apr 19, 2006
    #1
    1. Advertising

  2. Noozer wrote:

    > Is there a way to refer to another element when defining they properties of
    > an element in CSS?


    No.

    > ie:


    The abbreviation "ie" (usually written as "i.e.") means "that is" (from
    Latin "id est"). Is the following all you have in mind, or did you
    actually mean "e.g."?

    > .tab { display: block; margin:0; padding: 3px; }
    > #tab1 { [tab]; background-color: #DDD; }
    > #tab 2 { [tab]; background-color: #FDD; }


    Why don't you explain what you wish to accomplish, instead of a vague
    question and some fantasy-CSS code?

    You _probably_ want to do

    ..tab, #tab1, #tab2 {
    display: block;
    margin: 0;
    padding: 0.2em; }

    #tab1 { background: #ddd; color: black; }

    #tab2 { background: #fdd; color: black; }

    though with much more meaningful class names and identifiers.
     
    Jukka K. Korpela, Apr 19, 2006
    #2
    1. Advertising

  3. Noozer

    Noozer Guest

    "Jukka K. Korpela" <> wrote in message
    news:e25210$i9q$...
    > Noozer wrote:
    >
    >> Is there a way to refer to another element when defining they properties
    >> of an element in CSS?

    >
    > No.


    Drat.

    >> ie:

    >
    > The abbreviation "ie" (usually written as "i.e.") means "that is" (from
    > Latin "id est"). Is the following all you have in mind, or did you
    > actually mean "e.g."?


    "i.e." = "in other words" or "like this" is what I meant. "e.g." = "for
    example", would have worked as well

    >> .tab { display: block; margin:0; padding: 3px; }
    >> #tab1 { [tab]; background-color: #DDD; }
    >> #tab 2 { [tab]; background-color: #FDD; }

    >
    > Why don't you explain what you wish to accomplish, instead of a vague
    > question and some fantasy-CSS code?
    >
    > You _probably_ want to do
    >
    > .tab, #tab1, #tab2 {
    > display: block;
    > margin: 0;
    > padding: 0.2em; }
    >
    > #tab1 { background: #ddd; color: black; }
    >
    > #tab2 { background: #fdd; color: black; }


    Yup!

    > though with much more meaningful class names and identifiers.


    Well... "tab" is about as specific as I can get as the page is generated
    dynamically and it's for a "tab" on the page, used to select a group of
    related data. I guess "page" would have worked as well.

    I was just hoping to build a CSS template. Later, when I was designing a
    webpage, I would copy the template into the working directory and just add
    the elements from the page, referring to the existing elements in the
    template.

    In other words, my template would already have a "tab" style defined. When I
    put the template to use I would add my custom element definitions (
    "index_tab", "useredit_tab", etc.) specific to my webpage, relatingthem it
    to the already existing "tab" definition found in my template.
     
    Noozer, Apr 19, 2006
    #3
  4. Noozer

    Andy Dingley Guest

    Noozer wrote:
    > Is there a way to refer to another element when defining they properties of
    > an element in CSS?


    CSS doesn't have elements. HTML has elements, CSS has statements or
    "rules" (roughly the scope of the curly brackets) and declarations
    (setting a named property to a value)
    http://www.w3.org/TR/CSS21/syndata.html#q7

    To get _anywhere_ with sophisticated CSS, you really have to start
    understanding how the cascade rules work in selecting the rules that
    will be applied to the document. Part of this involves understanding
    what's HTML and what's CSS.

    What you're asking for looks like some sort of "CSS macro" where your
    CSS rules would be able to refer to other CSS rules (NB - not HTML
    elements, as you stated). CSS doesn't have this.

    What CSS does have is a set of selection, inheritance and cascading,
    such that you can bind CSS rules to the document tree.
    http://www.w3.org/TR/CSS21/cascade.html
    Although it's quite different from what your example described, it's
    closer to what you asked for.

    A well-designed cascade of CSS rules can avoid much duplication by
    using CSS' rule selection. If you want a set of declarations to apply
    to particular scopes, then grouping them into rules and picking the
    right selector can give you neat, compact CSS. Of course this is much
    harder to understand than it sounds! In particular it seems to confuse
    anyone with experience to OO coding, as it looks similar but behaves
    quite differently.

    As a useful technique to learn it, write some horrible CSS and then
    validate it. You'll generally get the equivalent cascade displayed to
    you afterwards which can often be either illuminating for how the
    selectors had worked, or might even be the basis for a refactored
    simplified stylesheet.
     
    Andy Dingley, Apr 19, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Noozer
    Replies:
    10
    Views:
    2,115
    Mitja
    Oct 13, 2004
  2. Paul F. Johnson
    Replies:
    12
    Views:
    678
    Mark Parnell
    Oct 25, 2004
  3. Luke Wu
    Replies:
    8
    Views:
    464
    Luke Wu
    Jan 18, 2005
  4. Replies:
    3
    Views:
    330
  5. HANM
    Replies:
    2
    Views:
    723
    Joseph Kesselman
    Jan 29, 2008
Loading...

Share This Page