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

Question

[Im p3l]

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

<div class="first">
    <p>some text</p>
    <img>
    <p>more text</p>
    <div>
       <p>text</p>
    </div>
</div>

first {
  background: #444;
}
p, img {
opacity: 0.5;
}

Answer 1

[Рома Зварич]

1) Чтобы выделить все элементы, которые являются "дочерними" текущему (находятся на один уровень ниже), следует использовать знак "больше" и звёздочку

.first > * {
    opacity: 0.5;
}

2) Чтобы выделить все элементы внутри текущего, которые находятся на любом уровне вложенности, следует использовать просто звёздочку без знака "больше"

.first  * {
    opacity: 0.5;
}

Answer 2

[Павел Антонов]

Такое правило сработает на все вложенные друг в друга дочерние элементы

.first * {
   opacity: 0.5;
}

А так только на дочерние элементы .first и не глубже

.first > * {
   opacity: 0.5;
}