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

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

<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; }

но это соответствует всем переключателей, не только один cotnained в c3 div.

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

посмотреть http://jsfiddle.net/Bp3qn/1/ на живом примере.

I обновлено http://jsfiddle.net/Bp3qn/3/

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

10
css css-selectors

2 ответов

вам не нужны другие элементы в селекторе, если вы только хотите, чтобы соответствовать .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;}
16
div.c1 .c2 .c3 input,.c3 textarea { border: 1px solid #f00; }
0