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">Multi ple 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]

spolsky wrote:

<P CLASS="clsCode1 , clsCode2">Multi ple styles</P>

I don't know is it standard, but it works as the following:
<P CLASS="clsCode1 clsCode2">Multi ple styles</P>

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]

spolsky wrote:

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?

elementReferenc e.className = 'aClass';
elementReferenc e.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/ >
<URL: http://www.w3.org/TR/DOM-Level-2-Style/ >

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

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

<P CLASS="clsCode1 clsCode2">Multi ple styles</P>

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.infosystem s.www.authoring.stylesheets
<URL:
http://groups.google.com.au/group/co...s?lnk=li&hl=en

>

--
Rob

[spolsky]

hi,

RobG:

elementReferenc e.className = 'aClass';
elementReferenc e.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?