Adjusting the cascade...

[aspr1n]

By default I style all my key elements, and with form elements I use a class to hit each form element type eg.:

input.text {
font-size: 10px;
width: 200px;
etc...
}

Then any:

<input type="text" class="text" name="field" />

gets that style.

My problem is defining an addition to that definition without using an ID.

What I was trying to say was

div.class .text {
width: 100px;
}
Thus take all my .text values and adjust the width setting, when this class follows the div.class.

However it appears the cascade of a class setting is too specific to overwrite a previously defined value.

How can I overwrite as above, without using an # selector?

Cheers,

asp

[pageoneresults]

This may not give you a direct answer to your question, but, the benefits of using multiple classes on one element has now come to light after reading this thread...

Multiple CSS classes for one element [webmasterworld.com]

[edited by: pageoneresults at 6:24 pm (utc) on May 14, 2003]

[drbrain]

Which browser are you using? 'div.center .text' has a specificity of 21, and 'input.text' has a specificity of 11, and on Mozilla, the input is 100px wide using the rules you gave. (If you dropped 'div', the first rule's specifity would be 20, still higher than the input.text)

Don't forget if you re-define the same rule later on, you'll override anything that came from the original style declaration.

[aspr1n]

he he thanks for that Dr - ok forgotten what I actually have is:

input.text { 
 stuff - but no positioning: 
} 
.classA input.text { 
 width: 200px; 
} 
.classB input.text { 
 width: 100px; 
}

Layout is:

<div class="classA"> 
 <div><input class="text" />< /div> 
 <div><input class="text" />< /div> 
 <div class="classB"><input class="text" />< /div> 
<div>

I would have thought "classB was still more specific in the above senario.

It is definately "classA causing the problem because if I rem it, the style applies fine.

Cheers,

asp

[drbrain]

I see two 200px wide input elements, then one 100px wide element.

If I swap the classA and classB rules, then all three are 200px wide (remember, sort order of rules matters).

Both IE6 and Mozilla get this correct for me...

P.S. I really wish IE would support attribute selectors, then you'd just have to do [type="text"] { width: 200px; } and ditch the class="text" on the input element.

[aspr1n]

hmm this gets stranger and stranger ....

I checked the rule order, "classB" is in a later style sheet to "classA".

I think I've found why, I have a label statement in there, that I didn't think would make any difference:

<div class="classB"><label>field name</label><input class="text" />< /div> 
And having just tested, without it it applies fine, which I don't get because <label> is a child of "classA" not "classB"? 
What is now equally odd though, if I change "classB" to: 
.classA input.text {  
 width: 200px;  
}  
.classA .classB input.text {  
 width: 100px;  
} 
It works fine with the <label> element in there. Now I'm really confused. ;) 
Cheers, 
asp
		
			

[drbrain]

Especially since you're using the descendent selector (' ') not the child selector ('>'). Even adding in the label on works fine on both Mozilla and IE6, which browser isn't behaving correctly?

[grahamstewart]

aspr1n: just use multiples classes like this..

input.text { /* whatever */ }
.wide { width: 100px; }
.verywide { width: 200px; }

and then do this in your html..

<input type="text" class="wide text">
<input type="text" class="verywide text">