Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help finding a practical CSS selector

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #292317
    nonlocality
    Participant

    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?

    #292366
    Paulie_D
    Member

    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/

    #292367
    Paulie_D
    Member

    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

    #292649
    Cinnfhaelidh
    Participant

    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; 
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.