Wählen Sie Artikel von css

Question

Gibt es eine Möglichkeit, das zweite Kind, was aktive Klasse von CSS hat auswählen? Wenn die aktive Klasse fortlaufend geändert wird.

<div> 
    <div class="owl-item"></div> 
    <div class="owl-item"></div> 
    <div class="owl-item"></div> 
    <div class="owl-item active"></div> 
    <div class="owl-item active"></div> 
    <div class="owl-item active"></div> 
    <div class="owl-item"></div> 
    <div class="owl-item"></div> 
</div> 

Answer 1

Nein, ich denke nicht, dass das mit CSS möglich ist. aber es ist möglich, mit JS,

let owlItem = document.querySelectorAll(".owl-item.active"); 
let SecondActive_owlItem = owlItem[1]; // 1 is second item in array 

Answer 2

Ich bin nicht völlig die Frage verstehen, aber hier sind einige Ideen.

CSS

Versuchen Sie, über CSS-Selektoren zu lesen. Es gibt viele Möglichkeiten, CSS-Selektoren zu verwenden, um ein bestimmtes Element auszuwählen. Ihr Fall würde wahrscheinlich einen N-Kind-Selektor beinhalten.

Referenzen:
CSS Selectors - SitePoint
CSS Selectors Reference - W3Schools

JQuery

Wenn Sie einige JQuery wissen, könnten Sie folgendes versuchen:
Zuerst eine ID zu Ihrer Eltern geben (sagen wir mal, test)

<div id="test"> 
    <div class="owl-item"></div> 
    <div class="owl-item"></div> 
    <div class="owl-item"></div> 
    <div class="owl-item active"></div> 
    <div class="owl-item active"></div> <!-- From what I understand, this is the target --> 
    <div class="owl-item active"></div> 
    <div class="owl-item"></div> 
    <div class="owl-item"></div> 
</div> 

Jetzt können Sie das Ziel mit t auswählen er folgt dem JQuery-Skript. Für diesen einen, ich gebe es in die $('document').ready() Veranstaltung, aber Sie können dies in jedem anderen Ereignis setzen.

$('document').ready(function() { 
    var actives = $('#test').children('.active'); // This returns an array of all the '#test' children that have the '.active' class 
    if(actives[1]) {// We check that there is a second children 
    // Do stuff, for example: 
    $(actives[1]).css('display', 'none'); // actives[1] is surrounded by $() because it is a DOM element 
    } 
});