CSS grouping

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS grouping

Post 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 :)
User avatar
Nathaniel
Forum Contributor
Posts: 396
Joined: Wed Aug 31, 2005 5:58 pm
Location: Arkansas, USA

Post by Nathaniel »

attribute styling...

Code: Select all

input[type=text]
{
/* styling here */
}
Doesn't work in IE though (who woulda thunk it?)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

I'm not sure thats exactly what I'm looking for...

I've never seen that technique before...however :P
User avatar
Todd_Z
Forum Regular
Posts: 708
Joined: Thu Nov 25, 2004 9:53 pm
Location: U Michigan

Post by Todd_Z »

User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply