: first-child no.active owl-carousel does not work

Good Morning!

I am using owl-carousel plugin which has several items. I need to get the first and last item on the front page, but I'm not getting it.

The carousel renders like this: 

<div class="owl-stage">
   <div class="owl-item cloned">
   </div>
   <div class="owl-item cloned">
   </div>
   <div class="owl-item cloned">
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item active">
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item cloned">
   </div>
   <div class="owl-item cloned">
   </div>
   <div class="owl-item cloned">
   </div>
</div>

The first page items are those that have the class .active. I tried some ways and it doesn't work: 

 .owl-stage .owl-item.active:first-child {
    border:red;
 }
 .owl-stage .active:first-child {
    border:red;
 }
.owl-item.active:first-child {
    border:red;
 }

I can't use nth-child (n) because the amount of items varies a lot. So I need to do a way to always pick up the first and last .active, regardless of how many items you have.

Obs.: sorry for the lack of accent, I'm using a vm and the keyboard is disfigured... :(

Author: Amanda Vieira, 2018-02-11
Source

3 answers

You can use callbacks to customize an event.

In order not to repeat lines of code, we create a function: 

function changeActive(e) {
    // Remove o seletor classe de todos item
    $('.owl-stage .owl-item').removeClass('ativo');
    setTimeout(function() {
        // Adiciona o seletor classe nos item da pagina ativa
        $('.owl-stage .active:first').addClass('ativo');
        $('.owl-stage .active:last').addClass('ativo');
    },0);
}

Add to stylesheet: 

.ativo {
    border: 1px solid red;
}

Instantiate the plugin 

var owl = $('.owl-carousel');
// Segundo a documentação, os eventos "initialize" e "initialized"
// devem ser anexados antes da inicialização do Carousel.
owl.on('initialized.owl.carousel', changeActive);
// Iniciamos o Carousel informando o callback
owl.owlCarousel({
    onChanged: changeActive,
    onTranslate: changeActive,
});

Example 

function changeActive(e) {
  // Remove o seletor classe de todos item
  $('.owl-stage .owl-item').removeClass('ativo');
  setTimeout(function() {
    // Adiciona o seletor classe nos item da pagina ativa
    $('.owl-stage .active:first').addClass('ativo');
    $('.owl-stage .active:last').addClass('ativo');
  },0);
}
var owl = $('.owl-carousel');
owl.on('initialized.owl.carousel', changeActive);
owl.owlCarousel({
  onChanged: changeActive,
  onTranslate: changeActive,
});
* {
  box-sizing: border-box;
}
.ativo {
  border: 1px solid red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>

<div class="owl-carousel owl-theme">
  <div class="item"><h4>1</h4></div>
  <div class="item"><h4>2</h4></div>
  <div class="item"><h4>3</h4></div>
  <div class="item"><h4>4</h4></div>
  <div class="item"><h4>5</h4></div>
  <div class="item"><h4>6</h4></div>
  <div class="item"><h4>7</h4></div>
  <div class="item"><h4>8</h4></div>
  <div class="item"><h4>9</h4></div>
  <div class="item"><h4>10</h4></div>
  <div class="item"><h4>11</h4></div>
  <div class="item"><h4>12</h4></div>
</div>

Obs.: the times when executing the code on the first page buga, as it puts the selector by class on the first and fourth item. I think it's a bug of his own plugin.

Reference

 1
Author: NoobSaibot, 2018-02-11 23:29:43

YOUR CODE

Of your CSS rules, this is the only correct one.

 .owl-stage .active:first-child {
    border:red;
 }`

POSSIBLE PROBLEM

If it hasn't worked out in your project, maybe you're referencing Owl in the wrong order. Here's how it would be:

<head>
    <meta charset="UTF-8">

    <title>Seu Título</title>

    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
    <link rel="stylesheet" href="style.css">
</head>

As the example above shows, carousel files should be called before any other stylesheets you have made. This, because of the CSS cascade.

Conclusion

Use the following code CSS: 

.owl-stage .active:first-child {
        border:red;
}

.owl-stage .active:last-child {
        border:red;
}

And this HTML: 

<head>
    <meta charset="UTF-8">

    <title>Seu Título</title>

    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
    <link rel="stylesheet" href="style.css">
</head>

If the problem persists

Use the keyword !important, like this: 

.owl-stage .active:first-child {
        border:red !important;
}

.owl-stage .active:last-child {
        border:red !important;
}

This will force the browser to use these properties.

USEFUL LINKS

Here are some links to study about CSS specificity:

Also has links to study about selectors CSS:

Now, links about !important:

 0
Author: , 2018-02-12 21:48:13

CSS has no selector to dynamically pick up elements or the first or last element based on the class.

A pseudo-class :first-child does not take the first element that owns the class, it selects the first child element of the parent element of the selector, (seemed confused? see this answer ).

JQuery and pure JS can select these elements based on class.

Example in jQuery: 

var actives = $(".owl-stage .active"),
primeiro = $(actives).first(),
ultimo = $(actives).last();

primeiro.css("color","blue");
ultimo.css("color","red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-stage">
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item active">
      bla
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
</div>

Example in pure JavaScript: 

var actives = document.body.querySelectorAll(".owl-stage .active"),
primeiro = actives[0],
ultimo = actives[actives.length-1];

primeiro.style.color = "blue";
ultimo.style.color = "red";
<div class="owl-stage">
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item active">
      bla
   </div>
   <div class="owl-item active"> (quero pegar esse)
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
   <div class="owl-item cloned">
      bla
   </div>
</div>
 0
Author: Sam, 2018-02-13 07:09:09