Class in a class.

[tshad]

Is there some way to set up something like a class inside of a class?

I have various tags and classes that use one color. The problem is that if
I change that color I need to change it for each one.

For example:

Inside of my css class I have the following:

a:visited {
color:#4AAABD;
}
a:visited.blueClass {
color:blue;
}
a:visited.redClass {
color:red;
}
a:visited.orangeClass {
color:#FF6600;
}
a:link {
color:#4AAABD;
}
a:link.blueClass {
color:blue;
}
a:link.redClass {
color:red;
}
a:link.orangeClass {
color:#FF6600;
}
a:active {
color:#4AAABD;
}
a:active.blueClass {
color:blue;
}
a:active.redClass {
color:red;
}
a:active.orangeClass {
color:#FF6600;
}


However, I want to change the color #4AAABD, to #3EA2BC. The problem is I
have about 20 places to change it.

Is it possible to do something like:

..backing {
color: #3EA2BC
}

and then use it in my other styles:

a:active {
class:backing
}

I could then change .backing to another color and have all my other styles
use it.

I know that is right. I am just trying to illustrate what I am trying to
do.

Thanks,

Tom

 

[Michael Winter]

On 29/04/2005 00:17, tshad wrote:

[snip]

I have various tags and classes that use one color. The problem is that if
I change that color I need to change it for each one.

Based on the class names, if you change a colour, you'll have to change
the name, too. Perhaps this is just illustrative, but if not you should
always use semantic (meaningful) class names. You should also specify
colours in pairs; both background and foreground.

If declarations apply to several rules, combine all of the selectors,
delimited by commas.

a:visited,
a:link,
a:active {
color: #4aaabd;
}

You can do the same thing with the classes. However,

a.blueClass {
color: blue;
}

may be sufficient.

[snip]

Mike

 

[tshad]

On 29/04/2005 00:17, tshad wrote:

[snip]

I have various tags and classes that use one color. The problem is that
if I change that color I need to change it for each one.

Based on the class names, if you change a colour, you'll have to change
the name, too. Perhaps this is just illustrative, but if not you should
always use semantic (meaningful) class names. You should also specify
colours in pairs; both background and foreground.

If declarations apply to several rules, combine all of the selectors,
delimited by commas.

a:visited,
a:link,
a:active {
color: #4aaabd;
}

You can do the same thing with the classes. However,

a.blueClass {
color: blue;
}

Would this work for all the links?

Would I have to apply this to each link to make it work?

The other problem is that I was going to use the same color for various
things, such as <th> headings, some menu backgrounds etc.

I was hoping I could set up a class/style and then apply it to each of the
tags or styles in the css file and then just change the class/style in one
place.

Tom

may be sufficient.

[snip]

Mike

 

[Michael Winter]

[snip]

If declarations apply to several rules, combine all of the selectors,
delimited by commas.

a:visited,
a:link,
a:active {
color: #4aaabd;
}

You can do the same thing with the classes. However,

a.blueClass {
color: blue;
}

Would this work for all the links?

If the class (rather than pseudo-class) containing selectors came later
in the style sheet (as above), it should. However, IE calculates the
specificity incorrectly. You'd either have to include the pseudo-classes
as well,

a:active.blueClass,
a:link.blueClass,
a:visited.blueClass {
color: blue;
}

or mark the declaration as important.

a.blueClass {
color: blue !important;
}

Would I have to apply this to each link to make it work?

The selectors shown in the post (and my previous one) would apply to all
links in the document.

The other problem is that I was going to use the same color for various
things, such as <th> headings, some menu backgrounds etc.

You can extend the selector to include these other elements:

a:active,
a:link,
a:visited,
th {
color: #4aaabd;
}

I was hoping I could set up a class/style and then apply it to each of the
tags or styles in the css file and then just change the class/style in one
place.

Macros aren't a feature of CSS. Macro-based editing may a feature of
some software. You could even run a file through a command line
preprocessor, like PHP.

Mike

 

[Toby Inkster]

Is it possible to do something like:
.backing {
color: #3EA2BC
}

and then use it in my other styles:
a:active {
class:backing
}

Does your server support PHP?

=================== stylesheet.php ===================
<?
header("Content-Type: text/css");
$fg = 'black';
$bg = 'white';
$emphasis = '#960';
$hideme = 'silver';
$fontsize = isset($_COOKIE['fontsize'])?$_COOKIE['fontsize']:'100';
?>
body {
color: <?=$fg?>;
background: <?=$bg?>;
font-size: <?=$fontsize?>%;
}
h1 {
color: <?=$bg?>;
background: <?=$emphasis?>;
}
h2,h3,dd,strong {
background: <?=$bg?>;
color: <?=$emphasis?>;
}
small {
background: <?=$bg?>;
color: <?=$hideme?>;
}
======================================================

And then just:

<link rel="stylesheet" media="screen,projection"
href="stylesheet.php" type="text/css">

in your HTML document.