How to set first-child in multi class

Question

Hi I have a question about css. I want to change the color the first element of class 'active' which is "3".

This is my code, but it doesn't work.

.item.active:first-child {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item clone" style="width:250px">1</div>
<div class="item clone" style="width:250px">2</div>
<div class="item active" style="width:250px">3</div>
<div class="item active" style="width:250px">4</div>
<div class="item active" style="width:250px">5</div>
<div class="item" style="width:250px">6</div>
<div class="item" style="width:250px">6</div>

And Is there any way to solve this problem with Jquery???

Please help.

`:first-child` always refers to the first child of the **parent**. In this case, it refers to `1`. Adding classes to attempt to change the target does not change this behaviour. — Obsidian Age, Mar 22 '18 at 03:15
nth-selectors reference the parent and siblings it ignores class — zer00ne, Mar 22 '18 at 03:16

score 3 · Accepted Answer · answered Mar 22 '18 at 03:19

You can use first with class like this in jquery.

$( ".active:first" ).css( "color", "red" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item clone" style="width:250px">1</div>
<div class="item clone" style="width:250px">2</div>
<div class="item active" style="width:250px">3</div>
<div class="item active" style="width:250px">4</div>
<div class="item active" style="width:250px">5</div>
<div class="item" style="width:250px">6</div>
<div class="item" style="width:250px">6</div>

score 0 · Answer 2 · answered Mar 22 '18 at 06:34

Using owl carousel center event You can also achieved the same:   

 .center {
            color: red;
        }

     $('.nonloop').owlCarousel({
                    center: true,
                    items: 2,
                    loop: false,
                    margin: 10,
                    responsive: {
                        600: {
                            items: 4
                        }
                    }
                });

How to set first-child in multi class

2 Answers2