Css selector if a child or grandchild is given a particular class

Asked Oct 05 '18 at 12:25

Active Oct 05 '18 at 12:25

Viewed 23 times

I am working on a list application - and I need to hook into the parent selector if the child/grandchild is given an active class.

<div class="checkbox-click-drop-wrapper">
   <div class="checkbox-click-drop">
     <div class="checkbox-click-drop-group edit-order-mode">           
     </div>
   </div>
</div>

so when edit-order-mode is on the child --- I need to select the grandparent and override css styles

is there a way to do this?

asked Oct 05 '18 at 12:25

The Old County

2

Yes, but I believe you will need JavaScript in order to check what class is currently on your child element and then do a condition around that. – Martin Oct 05 '18 at 12:27
It can't be done with plain `CSS` or `CSS3` until `CSS4` – Hary Oct 05 '18 at 12:28
I'm using ember -- to append the class back to the grand parent - can be done how? – The Old County Oct 05 '18 at 12:31
There's a way if you can change your HTML, is there a reason you don't? – zer00ne Oct 05 '18 at 12:31
its nested and recursive – The Old County Oct 05 '18 at 12:31
So you have free reign and no CMS restrictions? – zer00ne Oct 05 '18 at 12:32
yes - pretty much - but its far more complex that it is - and its ember – The Old County Oct 05 '18 at 12:33
Is the child's classes changed by a click event or programmatically? – zer00ne Oct 05 '18 at 12:37
via ember - yes -- I am unsure how to propagate back up to the root parent – The Old County Oct 05 '18 at 12:39
@mbharanidharan88 I've checked the CSS4 selectors but still not able to find parent selector. Where did you get that info? – Oct 05 '18 at 12:42
1

@StarLight, It was [proposed](https://www.w3.org/TR/2011/WD-selectors4-20110929/) but it seems the document is outdated now – Hary Oct 05 '18 at 12:45
So there's no way to assign a class to both tags? Like have the grandparent and grandchild have a class that they only share and when that condition is triggered just target that special class? Like `.edit-order-mode` is assigned to both tags but they have different rules dependent upon whether it's the elder or younger? – zer00ne Oct 05 '18 at 12:46
I'm trying to use a computed variable to detect the change – The Old County Oct 05 '18 at 12:50
When the change happens the user us not involved and there's no events? – zer00ne Oct 05 '18 at 13:00
I fixed it with the computed variable -- its a nested recursive ember application - tricky to append the class at the right place – The Old County Oct 06 '18 at 18:45

Css selector if a child or grandchild is given a particular class

0 Answers0