Alterar largura de todos os elementos selecionados que são descendente de uma div id = “content”

Question

Eu estou tentando estilo de todos os elementos <select> que são um descendente de um <div>. Eu poderia ter um colocar uma aula sobre eles, mas eu estava tentando ser inteligente: -)

Eu acredito que ele não funciona no IE6 mas isso funciona no IE7 etc?

Como você fazê-lo

Aqui está um dos meus seleciona (não tem classe ou id), mas todos eles são descendentes de uma div cujo id é "conteúdo"

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

Todas as idéias?

Answer 1

Se você quiser alguma escolha que é descendente de um elemento com id = "content":

#content select { ... }

Se você quiser alguma escolha que é um descendente direto de um elemento com id = "content":

#content > select { ... }

Se você quer limitá-lo a apenas elementos div com id = "content":

div#content select { ... }

O segundo pode não funcionar em alguns navegadores mais antigos, mas os outros devem trabalhar em até mesmo um navegador antigo, desde que ele tem qualquer apoio css em tudo, como o Netscape 4.

Answer 2

Isso deve funcionar em todos os navegadores:

#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

}

Eu acredito que esta é a forma como você pode fazer isso. Onde "conteúdo" é a classe do seu div. Isso irá formatar todos os seleciona dentro de uma div que tem a classe de "conteúdo".

O melhor de sorte!

Answer 6

A solução de Nick só fica descendentes diretos, por isso não iria ficar um seleto em um formulário no div. Isto irá levá-los, não importa quantos outros elementos profunda são:

#content select { width: 100px }

Se você só deseja obter, por exemplo, as entradas de texto que você pode fazer isso:

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

e não se esqueça que as entradas de senha são diferentes do que entradas de texto!