Change width of all Select elements who are descendent of a div id=“content”

Question

I'm trying to style all <select> elements that are a descendant of a <div>. I could have a put a class on them but i was trying to be clever :-)

I believe it doesn't work in ie6 but does it work in ie7 etc?

How do you do it

Here is one of my selects (it has no class or id) but they are all descendents of a div whose id is "content"

<div id="content">
    <select >
        <option></option>
    </select>
</div>

Any ideas?

Answer 1

If you want any select that is a descendant of an element with id="content":

#content select { ... }

If you want any select that is a direct descendant of an element with id="content":

#content > select { ... }

If you want to limit it to only div elements with id="content":

div#content select { ... }

The second one might not work in some older browsers, but the others should work in even an ancient browser as long as it has any css support at all, like Netscape 4.

Answer 2

This should work across browsers:

#content select {
   // Styles for selects inside the div with id `content'
}

Answer 3

.myDiv select {
  font-family:verdana;
}

<div class="myDiv">
  <p><select>...</select></p>
  <p><select>...</select></p>
</div>

Answer 4

div#content > select {
}

Answer 5

.content select {

              css here

}

I believe this is how you can accomplish this. Where "content" is the class of your div. This will format all selects inside of a div that has the class of "content".

Best of Luck!

Answer 6

Nick's solution only gets direct descendants, so it wouldn't get a select in a form in the div. This will get them no matter how many other elements deep they are:

#content select { width: 100px }

If you only want to get, for example, the text inputs you can do this:

#content select[type=text] { width: 100px }

and don't forget that password inputs are different than text inputs!