:first-Child no . active Owl-Carousel does not work

Question

Good morning!

I am using the Owl-Carousel plugin that has several items. I need to get the first and last item on the first page, but I’m not getting it.

Carousel renders this way:

<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 .active. I’ve tried a few 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 cannot use Nth-Child(n) because the quantity of items varies a lot. So I need to do it in a way that always takes the first and the last. active, regardless of how many items you have.

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

Answer 1

You can use Callbacks to personalize an event.

To avoid repeating 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 style sheet:

.ativo {
    border: 1px solid red;
}

Create the plugin instance

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.: Sometimes when executing the code on the first page, it puts the selector per class on the first and fourth item. I believe it is a bug of the plugin itself.

Reference

• Events

Answer 2

CSS does not have a selector to pick elements dynamically or first or last element based on the class.

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

Already jQuery and pure JS can select these elements based on the 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>

Answer 3

YOUR CODE

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

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

POSSIBLE PROBLEM

If it didn’t work out in your project, maybe you’re referencing Owl in the wrong order. Here’s what would be right:

<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 style sheet you have made. That’s because of the CSS waterfall.

CONCLUSION

Use the following CSS code:

.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, thus:

.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:

• Shay Howe;
• Google.

You also have links to study about CSS selectors:

• W3schools;
• Google.

Now, links regarding the !important:

• Zeno Rocha.