I have the following html structure:
<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>
How do I apply, for example, a padding in the img tag inside box2 via css?
Thank you
By the title of the question, I believe the solution would be:
div > p > img {
padding: 10px;
}
The > operator will fetch any child element directly from the related elements. That is, div > p will search for all p elements that have a parent element div and p > img will search for all img elements that have a p parent element.
See an example:
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><divclass="box2">
<p>texto</p>
<p>texto</p>
<p><img src="http://via.placeholder.com/350x150"></p><p>texto</p></div>How Selectors Work>, +, ~ in CSS?
use like this:
.box2 p img
{
Código
}
.box2 img {
padding: 5px;
}
As you only have an image inside the box2 you can do as exemplified above (with inheritance).