Раздетые строки без таблицы - дочерние элементы div внутри div

Question

Я бы хотел раздеть ряды со "сложными" детьми. Я не могу понять, как это сделать. Я использую бутстрап, не уверен, что это что-то меняет, наверное нет;)

Вот что я делаю: https://jsfiddle.net/1w9tv4ce/2/ Я хочу, чтобы все test-01 были зелеными, например, test-02 черными, test-03 зелеными, test-04 черными.

.rows-search div:nth-child(even) {
  background-color: #95CA44;
}

.rows-search div:nth-child(odd) {
  background-color: black;
}

.search-light-grey {
  color: darkgray;
}

<div class="container search-light-grey">
  <div class="rows-search">
    <div id="1">
      test-01
      <div>
        1
      </div>
      <div>
        <div>
          2a
        </div>
        <div>
          2b
        </div>
        <div>
          2c
        </div>
      </div>
    </div>
    <div id="2">test-02</div>
    <div id="3">test-03</div>
    <div id="4">test-04</div>
  </div>
</div>

Большое спасибо!

Answer 1

Согласно моему комментарию, используйте селектор > - означает прямые дети

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

.rows-search > div:nth-child(even) {
  background-color: #95CA44;
}

.rows-search > div:nth-child(odd) {
  background-color: black;
}

.search-light-grey {
  color: darkgray;
}

<div class="container search-light-grey">
  <div class="rows-search">
    <div id="1">
      test-01
      <div>
        1
      </div>
      <div>
        <div>
          2a
        </div>
        <div>
          2b
        </div>
        <div>
          2c
        </div>
      </div>
    </div>
    <div id="2">test-02</div>
    <div id="3">test-03</div>
    <div id="4">test-04</div>
  </div>
</div>

Answer 2

Используйте дочерний комбинатор (>) в своих селекторах (это будет предназначаться только для немедленных дочерних элементов) - см. Демонстрацию ниже:

.rows-search > div:nth-child(even) { /* <-- changed */
  background-color: #95CA44;
}

.rows-search > div:nth-child(odd) { /* <-- changed */
  background-color: black;
}

.search-light-grey {
  color: darkgray;
}

<div class="container search-light-grey">
  <div class="rows-search">
    <div id="1">
      test-01
      <div>
        1
      </div>
      <div>
        <div>
          2a
        </div>
        <div>
          2b
        </div>
        <div>
          2c
        </div>
      </div>
    </div>
    <div id="2">test-02</div>
    <div id="3">test-03</div>
    <div id="4">test-04</div>
  </div>
</div>