How to select an img after the first p tag with css?

Question

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

Answer 1

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
    }

Answer 2

.entry-content p>img {
 // your css
}

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

.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.

Answer 7

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.