How to target first img in every wordpress post with CSS [closed]

Firstly i would say this is off-topic here as it purely relates to css/js, but let me try to give some pointers.

Here you markup is :

<article>
    <header></header>
    <div>
    ....
    <p><img class="align-center" src="https://wordpress.stackexchange.com/questions/225091/path/to/img1"></p>
    ....
    <p><img class="align-center" src="path/to/img2"></p>
    ....
    </div>
</article>

first-of-type means selecting the first child of the selector parent.

In the above markup , the targeted selector is image with class align-center and the selector parent is p. So selecting the first child of the selector parent matches both images. That’s why both images are being styled.

first-child means select an element if it is an image with class align-center and and is the first child of a parent selector. So it matches both images.

I would recommend using JavaScript selectors here.

document.querySelector(".single-post .entry-content img.aligncenter")

returns first element in the result.

If you are using jQuery use :first filter.

References:

first-of-type

first-child

Related Posts: