: first-Kind und: last-Kind arbeiten nicht in Eule Karussell 2

Question

I Owl Karussell 2 bin mit und haben benutzerdefinierte CSS hinzugefügt:

$(document).ready(function() { 
 
    $("#owl-demo").owlCarousel({ 
 
    navigation: true, 
 
    pagination: true, 
 
    lazyLoad: true 
 
    }); 
 
});

#owl-demo .owl-item > div img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    margin-bottom: 4px; 
 
} 
 
#owl-demo .owl-item > div { 
 
    padding: 0px 2px 
 
} 
 
#owl-demo .owl-item > div:first-child { 
 
    border: 6px solid #e1e1e1; 
 
}

<div id="owl-demo" class="owl-carousel"> 
 
    <div> 
 
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> 
 
    </div> 
 
    <div> 
 
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> 
 
    </div> 
 
    <div> 
 
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script> 
 
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet" /> 
 
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet" />

Das ist für mich gearbeitet, aber ich würde gerne :last-child OR :first-child verwenden, um einen CSS-Rahmen nur zum ersten oder letzten div hinzuzufügen. In Aktion funktioniert das nicht und zeigt stattdessen einen Rahmen für alle div s.

Wie kann ich das beheben?

DEMO here

Answer 1

Ihre Logik ist etwas falsch, wenn :first-child verwenden. Das Targeting der div innerhalb .owl-item mit :first-child führt dazu, dass alle div s ausgewählt werden, da sie die ersten div innerhalb .owl-item sind.

Was Sie tun müssen, ist :first-child verwenden, um die erste Instanz von .owl-item dann Ziel die div innerhalb dieser zu finden.

Folgende Änderungen sind erforderlich:

• ändern #owl-demo .owl-item > div:first-child zu #owl-demo .owl-item:first-child div

$(document).ready(function() { 
 
    $("#owl-demo").owlCarousel({ 
 
    navigation: true, 
 
    pagination: true, 
 
    lazyLoad: true 
 
    }); 
 
});

#owl-demo .owl-item > div img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    margin-bottom: 4px; 
 
} 
 
#owl-demo .owl-item > div { 
 
    padding: 0px 2px 
 
} 
 
#owl-demo .owl-item:first-child div { 
 
    border: 6px solid #e1e1e1; 
 
}

<div id="owl-demo" class="owl-carousel"> 
 
    <div> 
 
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> 
 
    </div> 
 
    <div> 
 
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> 
 
    </div> 
 
    <div> 
 
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" /> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script> 
 
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/> 
 
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet"/>

http://fiddle.jshell.net/wkh1mx2e/