Как выбрать несколько элементов с помощью CSS

Question

У меня есть следующая разметка:

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

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

Я хочу сопоставить элементы input и textarea из div.c3 только с одним правилом CSS. Я использую

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

, но это соответствует всем текстовым областям, а не только тому, что приписано в c3 div.

Возможно ли это, или я должен написать отдельные селекторы CSS для каждого элемента?

Посмотрите на http://jsfiddle.net/Bp3qn/1/ для живого примера.

---

Я обновил http://jsfiddle.net/Bp3qn/3/

Мне нужно выделить только input и textarea, содержащиеся в контейнерах c1-> c2-> c3, а не другие комбинации.

Answer 1

Вам не нужны другие элементы в селекторе, если только вы только не хотите соответствовать .c3, если оно находится в пределах div.c1 .c2:

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

Если вы делаете (согласно вашим изменениям), используйте это:

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

Демо: http://jsfiddle.net/wesley_murch/Bp3qn/6/

---

после редактирования: вот что я пытаюсьизбегать (моя настоящая таблица стилей намного сложнее и правила CSS длиннее, и ее становится трудно читать)

В этом случае, чтобы упростить задачу, просто добавьте другой класс к этому .c3как это:

<div class="c3 special">

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

Демо: http://jsfiddle.net/wesley_murch/Bp3qn/7/

Если вы ДОЛЖНЫ иметь селектор как можно меньшего размера, и нет других дочерних элементов .c3.special, просто используйте селектор звездочек (почти никогда не рекомендуется):

.c3.special * {border: 1px solid #f00;}

Answer 2

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