0

For some reason I cannot specifically override the overflow hidden property of the .inner-carousel.

This code does the job in the general case:

   .carousel-inner{
      overflow: visible;
    }

But I want it in the specific case that only when I use the aside tag inside the carousel divs that the overflow will become visible (i.e. the aside will be visible).

Strangely enough, this code does not work.

   .carousel-inner aside {
      overflow: visible;
    }

What could be going on?

I recreated a minimal example on Bootply.

When you change .carousel-inner aside{ to .carousel-inner{ the result that I want will work. The problem is that it then applies to all elements and I only want to apply it to aside.

Edit: I've noticed this question gives a direct answer to my problem. For some reason though I can't get the solutions implemented. So if someone has another suggestion I'd be happy to hear it.

Community
  • 1
  • 1
Melvin Roest
  • 1,392
  • 1
  • 15
  • 31

1 Answers1

0

What you want to do is not possible in CSS as you can't really target "parents" with selectors based on a specific children configuration. You would then need some javascript/jQuery code to run in order to add a class to all divs being direct parent of an aside element.

Here's a jQuery example : 

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

And the fiddle : https://jsfiddle.net/su83yo5k/

Once you implement this, you can easilly attach any property to this class, was it overflow or in the case of my example the basic text color...

Laurent S.
  • 6,816
  • 2
  • 28
  • 40