Hey there, I'm trying to apply CSS to all forms within a div. For example:

<style type="text/css">
#form-fields > input {
height:23px;
width:290px;
padding:3px 3px 2px;
font-size:18px;
margin-bottom:14px;
border:1px solid #c7c7c7;
background-image:url(/images/input-background.png);
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
#form-fields > input:focus {
border-color:#4478b2;
}
</style>

And then I have

<div id="form-fields">
blah blah forms
</div>

Is there a way I can select all descendants?

3 answers

3
points
This was chosen as the best answer

Yes, simply:

div#formFields form input {
  height:23px;
}

Note about the class/id names, I try to stay away from anything besides a good old underscore when needed:

See this snippet from the W3C documentation:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W\?" or "B\26 W\3F".

Also, if you're trying to make all form elements the same style, use multiple selectors like this:

form#formFields form input, 
form#formFields form select, 
form#formFields form textarea {
    height:23px;
    etc. etc.
}

and then "reset" the unwanted styles for textboxes for example:

form#formFields form textarea {
    height:80px;
}
Answered almost 7 years ago by Gary Hepting
flavicius 118
0
points

In this case you can just delete ">" (child selector) and it'd work.

Answered almost 7 years ago by flavicius
  • Yes, flavicius is right. The ">" selector is specifying that it applies to DIRECT child elements only -- Note however, this doesn't really work with browsers that are not compliant with CSS 2.1 Gary Hepting almost 7 years ago
Tae 30
-1
points

Also you can use the universal selector:

#form-fields  * {}

This works even in IE6.

Answered almost 7 years ago by Tae
  • That would be quite drastic, as most definitely you are not going to want your paragraphs, headings and lists to all assume these styles that are intended for form-elements... Gary Hepting almost 7 years ago
  • Perhaps, but is another option. alainmeyer1 said "Is there a way I can select all descendants?", so I don't understand why the negative point. Tae almost 7 years ago