'Reference Nested DIV for CSS Styling

Using Elementor I have a current HTML structure as per the below;

<div class="carousel-post">
    <div class="elementor-element-overlay">
        <div class="elementor-widget-container">
            <div class="elementor-posts-container">
            </div>
        </div>
    </div>
</div>

I need to reference the class "elementor-posts-container" therefore, I have added class "carousel-post".

In my CSS I want to display "elementor-posts-container" as FLEX however, only this DIV which is under "carousel-post".

CSS

.carousel-post, .elementor-posts-container

The above works but targets all .elementor-posts-container

htmlcsselementor


Solution 1:[1]

***** Just an Explanation *****

Adding this as an answer since I am not able to add formatting.

It should be 

.carousel-post .elementor-posts-container
. Remove the comma.

  1. When the code is 

    .carousel-post, .elementor-posts-container
    , with the comma (,) it means match either of the two.

  2. When you remove the comma (,), it means match the child within the parent. -->>> This will match your usecase

  3. To get a direct match of the direct parent-child relationship (when you need it in the future), do 

    .carousel-post > .elementor-posts-container
    . This matches all the ".elementor-posts-container" divs directly within ".carousel-post".

***** EDIT *****

Doesn't this work:

.carousel-post .elementor-posts-container{
    display: flex;
}

The above code means, all ".elementor-posts-container" inside ".carousel-post" should be "display flex".

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions