- This topic is empty.
-
AuthorPosts
-
July 2, 2019 at 7:57 am #292317nonlocalityParticipant
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?
July 3, 2019 at 2:29 am #292366Paulie_DMemberSince 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
July 3, 2019 at 2:32 am #292367Paulie_DMemberThat 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
July 8, 2019 at 6:29 am #292649CinnfhaelidhParticipantLooks 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; }
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.