Why don't pseudo classes work?

Question

css

Good afternoon, I'm making a site quietly and I came across such a chip on modx cms.
There are 4 images, I'm trying to make each image change to others, which I added to my own.
The output itself is as follows:

Where is clearningTpl

<div class="fusion-layout-column fusion_builder_column fusion_builder_column_1_4  fusion-one-fourth fusion-column-inner-bg-wrapper 1_4" style="margin-top:0px;margin-bottom:0px;    float: left;">
        <div class="fusion-column-wrapper">
            <div class="fusion-sep-clear"></div>
            <div class="fusion-separator fusion-full-width-sep sep-none mySep" style="margin-left: auto;margin-right: auto;margin-top:550px;"></div>
            <div class="windows-1">
                <h3 style="text-align: center;"><a style="color: #ffffff;" href=""></a></h3>
            </div>
            <div class="fusion-clearfix"></div>
        </div>
        <span class="fusion-column-inner-bg hover-type-zoomin">
   			<a href="" aria-label="yoga">
    <span class="bgfimg fusion-column-inner-bg-image">
      <img class="" src="">
 		</span>
      </a>
 </span>
</div>

Well, the JS script itself changed automatically:

<script type="text/javascript">
imgs = [
'',
'',
'',
];

setInterval(function(){
    img = imgs[Math.floor(Math.random()*imgs.length)];
    $('span.bgfimg img:nth-child(1)').attr('src', img);
}, 1000);
</script>

Registered 1 image span.bgfimg img:nth-child(1) it does not count as 1 image. how to solve the problem? If 1 changes, then I will simply duplicate the other pseudo-classes and that’s all, but I don’t want to

Answer 1

Of course it doesn’t work, you have only one picture in the block
. If you had such a structure, then your code would work

<span class="bgfimg fusion-column-inner-bg-image">
<img class="" src="">
<img class="" src="">
<img class="" src="">
<img class="" src="">
</span>

And so you need to dance with pseudo-classes from the parent of the slider