1

I have the following html

<div class="text">
    <p>
        <img ...> //properties are needed only for this
    </p>
    <img ...>
    <figure>
        <img ...>
    </figure>
    <p>
        <img ...>
    </p>
    <p>
        <figure>
            <img ...>
        </figure>
    </p>
</div>


div.text img:first-of-type {
    border: 5px solid red;
}
<div class="text">
    <p>
        <img src="https://dummyimage.com/150x150/aaa/fff">
    </p>
    <img src="https://dummyimage.com/150x150/aaa/fff">
    <figure>
        <img src="https://dummyimage.com/150x150/aaa/fff">
    </figure>
    <p>
        <img src="https://dummyimage.com/150x150/aaa/fff">
    </p>
    <p>
        <figure>
            <img src="https://dummyimage.com/150x150/aaa/fff">
        </figure>
    </p>
</div>

First img may be children of div or wrapped in p, figure.

How can I add CSS-propreties for first img in ALL TREE of div.text?

lifecom
  • 139
  • 1
  • 5
  • `.text > img:first-child` or if you are wanting each first image, remove the `>`, the question is a bit unclear as to what you want – Pete Jan 14 '21 at 13:37
  • I want only first in ALL TREE, not for EACH first – lifecom Jan 14 '21 at 13:49
  • What does ALL TREE mean? Just putting it in bold and capitols doesn't make it any clearer. Anyway, if you only want the first one, then it's in my comment above – Pete Jan 14 '21 at 13:54
  • Thank you. The question has been edited for clarify – lifecom Jan 14 '21 at 14:16
  • Ok now you have edited with the extra p at the top, you probably want to use `.text img:first-of-type` - it will get you the first image tag within the text div – Pete Jan 14 '21 at 14:18
  • `:first-of-type` get all wrapped *img*. In my example - will get all *img*. – lifecom Jan 14 '21 at 14:32
  • How to get only the first *img* in my example? – lifecom Jan 14 '21 at 14:33
  • Snippet was added – lifecom Jan 14 '21 at 14:42
  • you may need to cancel all following images then: https://jsfiddle.net/u0nayjre/ although if an image isn't in the first element at the top of the div, you may need to use a js solution (or just add a class to the one you want to style) – Pete Jan 14 '21 at 14:51
  • Wow. It's solved. Thank you very much!!! – lifecom Jan 14 '21 at 15:03

0 Answers0