Modifier la largeur de tous les éléments Sélectionnez qui sont d'un descendant div id = « content »

StackOverflow https://stackoverflow.com/questions/1065681

  •  21-08-2019
  •  | 
  •  

Question

Je suis en train de style tous les éléments qui sont <select> descendant d'une <div>. Je aurais pu mettre une classe sur eux, mais je tentais d'être intelligent: -)

Je crois qu'il ne fonctionne pas dans IE6 mais ça marche dans IE7 etc?

Comment faites-vous

Voici une de mes sélectionne (il n'a pas de classe ou id), mais ils sont tous les descendants d'un div dont l'id est « content »

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

Toutes les idées?

Était-ce utile?

La solution

Si vous voulez tout sélectionner qui est un descendant d'un élément avec id = « content »:

#content select { ... }

Si vous voulez tout sélectionner qui est un descendant direct d'un élément avec id = "content":

#content > select { ... }

Si vous voulez limiter à seulement div éléments avec id = "content":

div#content select { ... }

Le second pourrait ne pas fonctionner dans certains navigateurs plus anciens, mais les autres devraient fonctionner même dans un navigateur ancien aussi longtemps qu'il a un soutien css du tout, comme Netscape 4.

Autres conseils

Cela devrait fonctionner dans les navigateurs:

#content select {
   // Styles for selects inside the div with id `content'
}
.myDiv select {
  font-family:verdana;
}

<div class="myDiv">
  <p><select>...</select></p>
  <p><select>...</select></p>
</div>
div#content > select {
}
.content select {

              css here

}

Je crois que c'est comment vous pouvez y arriver. Où « contenu » est la classe de votre div. Cela forme tous les sélectionne à l'intérieur d'un div qui a la classe de « contenu ».

Bonne chance!

La solution de Nick obtient seulement les descendants directs, donc il ne serait pas obtenir une sélection sous une forme dans la div. Cela les obtenir, peu importe combien d'autres éléments en profondeur, ils sont:

#content select { width: 100px }

Si vous voulez seulement obtenir, par exemple, les entrées de texte que vous pouvez faire ceci:

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

et ne pas oublier que les entrées de mot de passe sont différents des entrées de texte!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top