Css第一个孩子不通过动态滑块工作

Question

我使用动态滑块，将“活动”类添加到活动的滑块。总有4个滑块处于活动状态。

我想将自定义css添加到第一个活动滑块。它在加载时工作得很好，但是当更改滑块时，它不再起作用。因为活动类被添加到下一个元素。

我如何用css解决这个问题？

的CSS：

.products-grid .active:first-child .item {border-left: 0px solid #e6e6e6;}
.products-grid .active .item {border-left: 1px solid #e6e6e6;}

HTML：

<div class="owl-item" style="width: 300px;">
    <li class="item effect-pageLeft">
        <div class="item-inner">
            <div class="product-action">
                inner HTML
            </div>
        </div>
    </li>
</div>

<div class="owl-item active" style="width: 300px;">
    <li class="item effect-pageLeft">
        <div class="item-inner">
            <div class="product-action">
                inner HTML
            </div>
        </div>
    </li>
</div>

<div class="owl-item active" style="width: 300px;">
    <li class="item effect-pageLeft">
        <div class="item-inner">
            <div class="product-action">
                inner HTML
            </div>
        </div>
    </li>
</div>

<div class="owl-item active" style="width: 300px;">
    <li class="item effect-pageLeft">
        <div class="item-inner">
            <div class="product-action">
                inner HTML
            </div>
        </div>
    </li>
</div>

<div class="owl-item active" style="width: 300px;">
    <li class="item effect-pageLeft">
        <div class="item-inner">
            <div class="product-action">
                inner HTML
            </div>
        </div>
    </li>
</div>

<div class="owl-item" style="width: 300px;">
    <li class="item effect-pageLeft">
        <div class="item-inner">
            <div class="product-action">
                inner HTML
            </div>
        </div>
    </li>
</div>