Как выбрать или придать стиль всему ребенку под родителя

Question

У меня есть 1 родитель и 3 ребенка, например:

 <div class="container">
    <div class="header">Header</div>
    <div class="small-box-1">Small box 1</div>
    <div class="main-content">Main content</div>
</div>

Мне нужно выбрать всех детей для фона: красный, без влияния на родителей. Обычно я могу просто выбрать дочерний класс с чем-то вроде:

.header, .small-box-1, .main-content{background: red}

В sass я могу использовать что-то вроде этого:

& > * {background: red}

Таким образом, он выбирает всех дочерних элементов под родителем.

Мне интересно, можем ли мы сделать это, просто используя css? поэтому мне не нужно повторять классы, чтобы определить background: red

Answer 1

SASS - это просто CSS препроцессор, поэтому все, что вы пишете в SASS, в конечном итоге будет скомпилировано в CSS.

С учетом сказанного, если вы сделаете это в SASS:

.container {
  & > * {
    background: red;
  }
}

он будет преобразован в этот CSS код:

.container > * {
  background: red;
}

Так что вы сможете использовать этот код CSS.

Спасибо,

Answer 2

должен попробовать что-то вроде этого:

div.container > div {
  background-color: red;
}

Answer 3

попробуйте что-то вроде этого:

/* Select all direct child "div" of the parent ".container" */

.container > div
{
   background-color: red;
}