@LoranDeMarcus

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

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

<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;
}
  • Вопрос задан
  • 48 просмотров
Решения вопроса 2
1) Чтобы выделить все элементы, которые являются "дочерними" текущему (находятся на один уровень ниже), следует использовать знак "больше" и звёздочку
.first > * {
    opacity: 0.5;
}


2) Чтобы выделить все элементы внутри текущего, которые находятся на любом уровне вложенности, следует использовать просто звёздочку без знака "больше"
.first  * {
    opacity: 0.5;
}
Ответ написан
Комментировать
freislot
@freislot
Frontend-разработчик
Такое правило сработает на все вложенные друг в друга дочерние элементы
.first * {
   opacity: 0.5;
}


А так только на дочерние элементы .first и не глубже
.first > * {
   opacity: 0.5;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы