Question

Add Styles To Parent Element If It Has A Specific Child Element

0

Hello Makers, How can we apply style to a parent element if it contains a particular child element? For example, in the below list I would like to apply some styling to the class “parent” if it has an element with class “specialChild” in it. <ul class="parent"> <li class="child"></li> <li class="child"></li> <li class="specialChild"></li> </ul> Thank you.

asked 2021-11-25

Shreyash Mehta

1 answers

Marius van der Knaap · Answer 1 · 2021-11-25

Hi Shreyash,

The :has pseudoselector is in the CSS4 specification but it is not supported by any browsers as of yet. See here for the documentation on this spec.

Until it is supported, you would have to perform some kind of workaround. You could do a nanoflow datasource on the listview where you perform a JavaScript action to apply an additional class to the parent if the list contains a specific item, for instance. You could also do some trickery with conditional visibility or dynamic classes to apply a class based on an attribute which you set when you find a ‘specialChild’ list item.