How to write css for parent class based on child class?

Question

I want to add CSS only for listing-system class but child class of "expired". How i am struggling to write CSS for it, can anyone help me. Thanks

<div class="listing-system">
    <div class="listing-system-row">
        <div class="listing-system-row-image">
            <a href="#" style="background-image: url('#')">
                <div class="ribbon expired">
                    Expired                                 
                </div><!-- /.ribbon -->
            </a>
        </div><!-- /.listing-system-row-image -->
    </div><!-- /.listing-system-row-actions -->
</div><!-- /.listing-system-row -->

<div class="listing-system">
    <div class="listing-system-row">
        <div class="listing-system-row-image">
            <a href="#" style="background-image: url('#')">
                <div class="ribbon">
                    Pending                                 
                </div><!-- /.ribbon -->
            </a>
        </div><!-- /.listing-system-row-image -->
    </div><!-- /.listing-system-row-actions -->
</div><!-- /.listing-system-row --

possible duplicate https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Super User, Aug 04 '17 at 05:13
Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Super User, Aug 04 '17 at 05:13
`:has` selector is depricated in css3 , so you can's select parent class based on child class — chirag satapara, Aug 04 '17 at 05:15

score 0 · Answer 1 · answered Aug 04 '17 at 05:17

0

You can do this via Jquery, If you want to select a class '.listing-system' which has a child class '.ribbon.expired',

$('.ribbon.expired').closest('.listing-system').css('your css style goes here');

answered Aug 04 '17 at 05:17

Manju

1,680
2
12
21

Or better: `$('.ribbon.expired').closest('.listing-system').addClass('has-ribbon');` then add your styles to the `has-ribbon` class in CSS. – ESR Aug 04 '17 at 06:54

score 0 · Accepted Answer · answered Aug 04 '17 at 09:30

0

Hi this is working too

$(".ribbon.expired") .parentsUntil( ".listing-system" ) .css( "display", "none" );

answered Aug 04 '17 at 09:30

How to write css for parent class based on child class?

2 Answers2