apply multiple styles

[spolsky]

hi,

it is possible to apply multiple styles as shown in the following
example.

<STYLE TYPE="text/css"><!--

BODY { background-color:salmon; }
P { margin-left:20px; }
.clsCode { font-family:"Comic Sans MS"; font-size:10pt; color:navy;}
#idP1 { text-align:left; font-weight:bold; }

--></STYLE>

<P ID="idP1" CLASS="clsCode">Multiple styles</P>

however, i would like to apply multiple styles in this manner with
scripting. i want to assign a style class and apply another along with
the previous one. how can i achieve this? what is the best approach for
IE 6? are there any w3c standards that makes applying multiple styles
possible?

is it possible to assign multiple selectors to class attribute?
<P CLASS="clsCode1, clsCode2">Multiple styles</P>

is it possible to nest selectors within them?

.clsCode1 { font-family:"Comic Sans MS"; font-size:10pt; }
.clsCode2 { clsCode1; color:navy;}

thanks.

 

[Cylix]

<P CLASS="clsCode1, clsCode2">Multiple styles</P>

I don't know is it standard, but it works as the following:

is it possible to nest selectors within them?
.clsCode1 { font-family:"Comic Sans MS"; font-size:10pt; }
.clsCode2 { clsCode1; color:navy;}

I don't know there is any way to do so...

 

[RobG]

hi,

it is possible to apply multiple styles as shown in the following
example.
Yes.


<STYLE TYPE="text/css"><!--

Do not use HTML comment delimiters inside style elements.

BODY { background-color:salmon; }
P { margin-left:20px; }
.clsCode { font-family:"Comic Sans MS"; font-size:10pt; color:navy;}
#idP1 { text-align:left; font-weight:bold; }

--></STYLE>

<P ID="idP1" CLASS="clsCode">Multiple styles</P>

however, i would like to apply multiple styles in this manner with
scripting. i want to assign a style class and apply another along with
the previous one. how can i achieve this?

elementReference.className = 'aClass';
elementReference.className += ' anotherClass';

what is the best approach for IE 6?

The W3C standards compliant way - see above.

are there any w3c standards that makes applying multiple styles
possible?

Yes:

<URL: http://www.w3.org/TR/CSS21/ >

is it possible to assign multiple selectors to class attribute?
<P CLASS="clsCode1, clsCode2">Multiple styles</P>

Yes, but lose the comma - class names are separated by spaces:

is it possible to nest selectors within them?

.clsCode1 { font-family:"Comic Sans MS"; font-size:10pt; }
.clsCode2 { clsCode1; color:navy;}

The rules for how selectors and rules cascade is contained in the spec
(see above). You really should ask such questions in a CSS news group:

news: comp.infosystems.www.authoring.stylesheets
<URL:
http://groups.google.com.au/group/comp.infosystems.www.authoring.stylesheets?lnk=li&hl=en

 

[spolsky]

hi,

RobG:

elementReference.className = 'aClass';
elementReference.className += ' anotherClass';

this is ok, but what if some other script already assigns its own
classes. in this case, it would be possible to track our classes in the
className attribute(by searching in the string) and remove or add them
accordingly but isn't there any flexible approach? it would be better
if className is a collection that we could determine easily if required
classes are applied or not.
or is there any better approach to apply our multiple classes without
depending on other scripts on the page?