Comment sélectionner plusieurs éléments à l'aide de CSS

J'ai le balisage suivant:

<div class="c1">
  <div class="c2">
    <div class="c3">
      <input>
      <textarea></textarea>
    </div>

    <input>
    <textarea></textarea>
  </div>
</div>

Je veux correspondre à la input et textarea éléments de la div.c3 avec seulement une règle CSS. Je suis en utilisant 

div.c1 .c2 .c3 input,textarea { border: 1px solid #f00; }

mais cela correspond à tous les textareas, pas uniquement la cotnained dans le c3 div.

Est-ce possible, ou dois-je écrire une sélecteurs CSS pour chaque élément?

Regarder http://jsfiddle.net/Bp3qn/1/ pour l'exemple vivant.

J'ai mis à jour http://jsfiddle.net/Bp3qn/3/

J'ai seulement besoin de l'input et textarea contenues dans l'c1->c2->c3 conteneurs d'être soulignés, pas d'autres combinaisons.

OriginalL'auteur Quamis | 2011-05-27

  1. 17

    Vous n'avez pas besoin d'autres éléments dans le sélecteur, à moins que vous seulement voulez faire correspondre .c3 si c'est dans div.c1 .c2:

    .c3 input,
.c3 textarea {
    /* that's it! */
}

    Si vous n' (par édition), utilisez ceci:

    div.c1 .c2 .c3 input,
div.c1 .c2 .c3 textarea{
    border: 1px solid #f00;
}

    Démo: http://jsfiddle.net/wesley_murch/Bp3qn/6/

    après edit: c'est ce que j'essaie d'éviter (mon véritable feuille de style est beaucoup plus complexe et les règles css sont plus longs, et sa devient difficile à lire)

    Dans ce cas, pour faciliter les choses simplement ajouter une autre classe que .c3 comme ceci:

    <div class="c3 special">

.c3.special input,
.c3.special textarea{
    border: 1px solid #f00;
}

    Démo: http://jsfiddle.net/wesley_murch/Bp3qn/7/

    Si vous DEVEZ avoir le sélecteur le plus petit possible et il n'y a pas d'autres enfants de .c3.special, il suffit d'utiliser l'étoile sélecteur (presque jamais recommandé):

    .c3.special * {border: 1px solid #f00;}
    voir mes modifications pour plus de détails
    après edit: c'est ce que j'essaie d'éviter (mon véritable feuille de style est beaucoup plus complexe et les règles css sont plus longs, et sa devient difficile à lire)
    je ne peux pas ajouter une autre classe (je suis en train de garder les balises simple aussi:) ) et je ne peux pas sélectionner tous les enfants, mais il semble que c'est aussi bon qu'il obtient. thx
    Ouaip c'est aussi bon qu'il obtient. Utilisez simplement les commentaires et le code de bonne style pour garder votre CSS lisible.

    OriginalL'auteur Wesley Murch

  2. 0
    div.c1 .c2 .c3 input,.c3 textarea { border: 1px solid #f00; }
    cela correspond à toutes les textarea dont le parent est de classe est .c3, de sorte qu'il ne résout pas la question

    OriginalL'auteur Bart Vangeneugden