Fixes #5616: scope carousel state classes to immediate children only

2 files changed, 28 insertions, 28 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 8bdd175d6..1088df966 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5912,7 +5912,7 @@ a.badge:hover {
   overflow: hidden;
 }
 
-.carousel .item {
+.carousel > .item {
   position: relative;
   display: none;
   -webkit-transition: 0.6s ease-in-out left;
@@ -5921,46 +5921,46 @@ a.badge:hover {
           transition: 0.6s ease-in-out left;
 }
 
-.carousel .item > img {
+.carousel > .item > img {
   display: block;
   line-height: 1;
 }
 
-.carousel .active,
-.carousel .next,
-.carousel .prev {
+.carousel > .active,
+.carousel > .next,
+.carousel > .prev {
   display: block;
 }
 
-.carousel .active {
+.carousel > .active {
   left: 0;
 }
 
-.carousel .next,
-.carousel .prev {
+.carousel > .next,
+.carousel > .prev {
   position: absolute;
   top: 0;
   width: 100%;
 }
 
-.carousel .next {
+.carousel > .next {
   left: 100%;
 }
 
-.carousel .prev {
+.carousel > .prev {
   left: -100%;
 }
 
-.carousel .next.left,
-.carousel .prev.right {
+.carousel > .next.left,
+.carousel > .prev.right {
   left: 0;
 }
 
-.carousel .active.left {
+.carousel > .active.left {
   left: -100%;
 }
 
-.carousel .active.right {
+.carousel > .active.right {
   left: 100%;
 }
 
diff --git a/less/carousel.less b/less/carousel.less
index 33f98ac4d..072884d4f 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -17,48 +17,48 @@
 
 .carousel {
 
-  .item {
+  > .item {
     display: none;
     position: relative;
     .transition(.6s ease-in-out left);
   }
 
   // Account for jankitude on images
-  .item > img {
+  > .item > img {
     display: block;
     line-height: 1;
   }
 
-  .active,
-  .next,
-  .prev { display: block; }
+  > .active,
+  > .next,
+  > .prev { display: block; }
 
-  .active {
+  > .active {
     left: 0;
   }
 
-  .next,
-  .prev {
+  > .next,
+  > .prev {
     position: absolute;
     top: 0;
     width: 100%;
   }
 
-  .next {
+  > .next {
     left: 100%;
   }
-  .prev {
+  > .prev {
     left: -100%;
   }
-  .next.left,
-  .prev.right {
+  > .next.left,
+  > .prev.right {
     left: 0;
   }
 
-  .active.left {
+  > .active.left {
     left: -100%;
   }
-  .active.right {
+  > .active.right {
     left: 100%;
   }