Селекторы CSS и Bootstrap Карусель: не видно переполнения

Question

По какой-то причине я не могу специально переопределить скрытое свойство переполнения .inner-carousel.

Этот код делает работу в общем случае:

.carousel-inner{ 
     overflow: visible; 
    } 

Но я хочу в данном конкретном случае, что только тогда, когда я использую aside тег внутри карусели дивы, что переполнение станет видимым (т.е. в стороне будет видно).

Как ни странно, этот код не работает.

.carousel-inner aside { 
     overflow: visible; 
    } 

Что может быть?

Я воссоздал минимальный пример на Bootply.

Когда вы меняете .carousel-inner aside{ на .carousel-inner{, результат, который я хочу, будет работать. Проблема в том, что она применяется ко всем элементам, и я хочу применить ее только к aside.

Редактировать: Я заметил this вопрос дает прямой ответ на мою проблему. По какой-то причине, хотя я не могу реализовать эти решения. Поэтому, если у кого-то есть другое предложение, я был бы рад услышать это.

Answer 1

То, что вы хотите сделать, невозможно в CSS, поскольку вы не можете направить целевые «родители» с помощью селекторов на основе определенной конфигурации детей. Тогда вам понадобится код javascript/jQuery для запуска, чтобы добавить класс ко всем div, являющимся прямым родителем элемента в стороне.

Вот пример JQuery:

$(document).ready(function(){ 
    $('aside').each(function(){ 
     $(this).parents('.carousel-inner').addClass('withaside'); 
    }); 
}); 

И скрипка: https://jsfiddle.net/su83yo5k/

После того, как вы реализуете это, вы можете easilly прикрепить любое свойство к этому классу, это был overflow или в случае моего примера основной цвет текста ...