Conditional CSS Selector by referencing neighbor section

Question

I have the following css which works well, however, it executes all over my site which uses a CMS, so I'm trying to write a selector that only executes on example-widget when example-content is present. As you can see they are in two separate sections.

The widget works well everywhere on the site except one page where the above example-content is present, so I was just trying to fix this one page

@media(max-width: 767.5px) {
    #content > div > div.row.component.column-split .example-content {
        padding-left: 30px;
    }
    #content > div > div.row.component.column-split .example-widget{
        margin-left: 30px;
    }
}


<div class="row component column-split">
    <div class="col-sm-8">
        <div class="row">
            <div class="component rich-text">
                <div class="component-content">
                    <section class="example-content">
                        <p>Lorem Ipsum</p>
                        <br>
                        <p>Lorem Ipsum</p>
                        <br>
                        <span>Lorem Ipsum</span><br>
                        <span>Lorem Ipsum</span>
                    </section>
                </div>
            </div>
        <section class="example-widget" id="example-widget">
            <div class="widget-title">
                <h3>Lorem Ipsum</h3>
            </div>
        </section>
        </div>
    </div>
    <div class="col-xl-4">
    <div class="row"></div>
    </div>
</div>

Answer 1

There's still no parent selector in CSS, so you'll need to use javascript to check if the example-content element is present.

Here's a quick example using jQuery:

if ( $('.component-content').length > 0) $('.example-widget').addClass('highlight');

@media(max-width: 767.5px) {
    #content > div > div.row.component.column-split .example-content {
        padding-left: 30px;
    }
    #content > div > div.row.component.column-split .example-widget{
        margin-left: 30px;
    }
    .highlight {
        color: red;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row component column-split">
    <div class="col-sm-8">
        <div class="row">
            <div class="component rich-text">
                <div class="component-content">
                    <section class="example-content">
                        <p>Example content</p>
                        <br>
                        <p>Example content</p>
                        <br>
                        <span>Example content</span><br>
                        <span>Example content</span>
                    </section>
                </div>
            </div>
        <section class="example-widget" id="example-widget">
            <div class="widget-title">
                <h3>Example widget</h3>
            </div>
        </section>
        </div>
    </div>
    <div class="col-xl-4">
    <div class="row"></div>
    </div>
</div>