CODEWITHSUNDEEP
htmlcsscss-selectors
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

Select one div using a CSS Class from another non-parent div

Is there a way to select <div class="widget-area"> only if there exists a <div class="store-content"> before it?

HTML Structure:

<!--Store Content Div-->
<div id="content" role="main" class="store-content twentythirteen">...</div>

<div id="tertiary" class="sidebar-container" role="complementary">
    <div class="sidebar-inner">
        <!--Widget Area Div-->
        <div class="widget-area">
        </div>
    </div>
</div>

I was thinking something like 

.store-content~.widget-area {

}

Would Select .widget-area but that doesn't seem to be the case.

Upvotes: 2

Views: 121

Answers (1)

j08691
j08691

Reputation: 207861

You were close, use:

.store-content ~ div .widget-area {
    color:red;
}

jsFiddle example

~ is the general sibling selector but .store-content and .widget-area aren't siblings. You need the sibling of .store-content and then you can select a .widget-area child.

Upvotes: 6

Related Questions