Pelo título da pergunta, acredito que a solução seria:
div > p > img {
padding: 10px;
}
O operador >
irá buscar qualquer elemento filho direto entre os elementos relacionados. Isto é, div > p
buscará todos os elementos p
que possuem um elemento pai div
e p > img
buscará todos os elementos img
que possuem um elemento pai p
.
Veja um exemplo:
div > p > img {
padding: 10px;
border: 1px solid black;
}
<div class="box1">
<p>texto</p>
<p>texto</p>
<p><img src="http://via.placeholder.com/350x150"></p>
<p>texto</p>
</div>
<div class="box2">
<p>texto</p>
<p>texto</p>
<p><img src="http://via.placeholder.com/350x150"></p>
<p>texto</p>
</div>
Como funcionam os seletores >, + , ~ no CSS?