0

Tenho a seguinte estrutura html:

<div class="box1">
 <p>texto</p>
 <p>texto</p>
 <p><img src="imagem1.jpg"></p>
 <p>texto</p>
</div>
<div class="box2">
 <p>texto</p>
 <p>texto</p>
 <p><img src="imagem1.jpg"></p>
 <p>texto</p>
</div>

Como eu faço para aplicar, por exemplo, um padding na tag img dentro do box2 via css?

Obrigado

3 Respostas 3

2

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?

1

usa assim:

.box2 p img
{
   Código
}
1
.box2 img {
   padding: 5px;
}

Como vc só tem uma imagem dentro do box2 vc pode fazer como exemplificado acima (com herança).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .