Page 1 of 1

CSS grouping

Posted: Mon May 22, 2006 12:47 pm
by alex.barylski
Say I have a FORM or a DIV and those elements have multiple sub-elements

Obvious a form might look something like:

Code: Select all

<form id="test">
  <input type="text" name="usr"  />
  <input type="password" name="pwd"  />
  <input type="submit" value="Submit Login"  />
</form>
I have given the FORM an id value of test

Is there anyway I can assign individual elements of the FORM unique properties?

Something like:

Code: Select all

.test { font-family: "Verdana"; font-size: 8pt }
.test:input { border: 1px; }
That way I can avoid having to assign a new ID or CLASS to every INPUT or whatever tag I have inside a parent/container tag???

Cheers :)

Posted: Mon May 22, 2006 1:00 pm
by Nathaniel
attribute styling...

Code: Select all

input[type=text]
{
/* styling here */
}
Doesn't work in IE though (who woulda thunk it?)

Posted: Mon May 22, 2006 1:03 pm
by alex.barylski
I'm not sure thats exactly what I'm looking for...

I've never seen that technique before...however :P

Posted: Mon May 22, 2006 1:40 pm
by Todd_Z

Posted: Tue May 23, 2006 10:01 am
by pickle
If you want to be able to effect every <input> tag inside your 'test' form the same, this should work:

Code: Select all

#test input{
text-size:blah blah...
}
If you want to be able to change each element differently, you're probably going to need Javascript & run through the document.test.elements array.