Dfyjkt

I have this html:

<div class="entry-content">
<p>
<img src="foto.jpg">
</p>
<p>lorem</p>
<p>foo</p>
</div>

and this css:

.entry-content
border: none !important;
padding: 0;

p
margin: 16px 16px 0 16px;

.entry-content img
margin: 0 0 0 0;

I tried to select the img to keep margins at 0 only and let the others p tags have the 16px but it doesn't work.

My goal is to keep all the p tags with 16px margin except the first one because there's an image inside of it i'd like to keep 100% width of the container.

Actually i do can add a class to the img tag if it helps

Thanks a lot for your help

.entry-content p>img 
 // your css

I am not sure you want after first p tag or within first p tag but as per your code, it should be like

.entry-content p:first-child img
//your css

If you have some other tag before p tag, you need to use

.entry-content p:first-of-type img
 //your css
 

You tried define your style inline, only for the first img?

Try p img
//your css
.. if that doesn't work then create a fiddle or codepen so we can assist you better.

My goal is to keep all the p tags with 16px margin except the first one because there's an image inside of it i'd like to keep 100% width of the container.

CSS currently cannot look down into the children of an element and then modify the parent or other elements around it. Everything cascades downward in a nested fashion.

In other words it cannot say "There is an image inside this paragraph. I need to now change the style of the paragraph that is holding this image and give it a smaller margin."

There are only really going to be two ways to accomplish this.

One: You can create a class you manually assign to all the paragraphs that contain an image. So you'd have something like this:

.entry-content img, .margin-override
 margin: 0 0 0 0;

Then on your paragraph you'll do like this...

<div class="entry-content">
 <p class="margin-override">
 <img src="foto.jpg">
 </p>
 <p>lorem</p>
 <p>foo</p>
</div>

Which will set there to be no margin on your image or the paragraph containing the image.

Two: The other option is to use javascript/jQuery to search if a paragraph contains an image and then do an action to modify the margins of that paragraph when an image is found.

You say you're doing this for a wordpress theme. Wordpress comes packaged with jQuery by default these days so unless you've overridden that it's already in place for you. The next step would be writing a script for yourself to target these paragraphs and script enqueue if with your theme.

Here is a decent tutorial on how to add your own scripts to a wordpress theme.

.entry-content
border: none !important;
padding: 0;

p
margin: 16px 16px 0 16px;

.lafoto 
width: 200px;
height: auto;
margin: 0 0 0 0;

<div class="entry-content">
<p>
<img class="lafoto" src="https://i.imgur.com/bfMLLDz.jpg">
</p>
<p>lorem</p>
<p>foo</p>
</div>
and this css:

Just add a class to the image, or an id, its that simple.

There are many possible ways of doing it. First of all I would like to know why you are displaying the image nested within

Try this :- Instead of giving margin to P tag, assign margin to img tag, it will resolve your problem.