I need 2 different heights applied to 2 different fieldset tags

Question

What I am using in CSS is

form fieldset { height : 300px;
}

but I have

<fieldset><legend>ONE</legend></fieldset>

<fieldset><legend>TWO</legend></fieldset>

The problem is both field sets are being applied the same height. Is there a way to apply different heights to different fieldsets from CSS. I am not looking for inline styles which I know how to apply.

Answer 1

Give each fieldset an ID if you will only use each ONCE, otherwise use a class

<fieldset id="f1">
</fieldset>
<fieldset id="f2">
</fieldset>

OR

<fieldset class="bluefieldset"> 
</fieldset> 
<fieldset class="grayfieldset"> 
</fieldset>

A class signifies that many elements can use it. with Id in W3C it is the standard that the Id attribute be unique to the page

In CSS you reference a class like

.bluefieldset{}

OR

fieldset.bluefieldset{}

for the ID you use the hash like

#f1

OR

fieldset#f1{}

Answer 2

Use css :first-child selector (http://www.w3schools.com/css/pr_pseudo_first-child.asp)

This doesn't work in IE6