cssで項目を選択

Question

cssでアクティブなクラスを持つ2番目の子供を選択する方法はありますか？アクティブなクラスが連続的に変更されるとき。

<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

いいえ、CSSではできません。それは、私は完全に質問を理解していないのですが、ここでいくつかのアイデアがある

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

Answer 2

、JSで可能です。

CSS

CSSセレクタについてお読みください。特定の要素を選択するには、CSSセレクタを使用する方法がいくつかあります。あなたのケースにはおそらく、n番目の子セレクタが必要です。

参考文献：
CSS Selectors - SitePoint
CSS Selectors Reference - W3Schools

jQueryの

あなたには、いくつかのjQueryのを知っている場合、あなたは次のことを試みることができる：
まず、自分の親にIDを与える（のは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> 

ここで、tを使用してターゲットを選択できます彼はJQueryスクリプトに従っています。これについては、私は$('document').ready()イベントに入れていますが、これは他のイベントに入れることができます。

$('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 
    } 
});