Help finding a practical CSS selector

[nonlocality]

It is difficult to describe this without a picture. I am trying to come up with any way to select a particular div element in a list of div elements, where the element itself has no unique identifier that can be used to distinguish it. The heirarchy looks something like this:

Please see picture at https://ibb.co/vP5Xbfz. I can not get this to display, and I can not get the system to properly render my example.

The first div shown has an ID I can key off of. id=”pricing-tab”. But after that, all the classes and id’s are non unique. That means I have no way to select the specific div element I need to change. The other div elements should not be changed. There is a radio button inside this div element with a unique attribute ‘name=”cleaning_fee_type”, but since CSS does not have parent selectors, I can not think of an easy way to access the div element which is its grandparent. Can anyone think of a way to specify exactly the indicated div element above and no others?

I am trying to modify a WordPress site, so I can’t change the element names or add anything to make this easier.

Any advice on what I can do?

[Paulie_D]

Since you want to select UP the DOM (if I have read this correctly) then CSS isn’t going to help here.

You’ll need JS/JQ, probably something like .closest

https://api.jquery.com/closest/

[Paulie_D]

That said, it depends on what it is you are trying to do…i.e. why do you need to select this div.

There is one CSS property that allows “parent selection” :focus-within

[Cinnfhaelidh]

Looks like there are two possibilities

1) If the number of rows/columns elements won't change (at least not before the target):

#pricing-tab .block-body > :nth-of-type(5) > :nth-of-type(3) .form-group {
    visibility: hidden; 
}

2) Or, if it doesn't actually need to be the form-group (You might need to get creative and find a way to move styles (like background) from .form-group to the input & spans):

#pricing-tab [name="cleaning_fee_type"] ~ span { 
    visibility: hidden; 
}

[Author]

Posts