Define a CSS element as equal to another?

[Noozer]

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; }

 

[Jukka K. Korpela]

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.

 

[Noozer]

Drat.


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.

 

[Andy Dingley]

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.