Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

I’m juggling with CSS selectors but I’m not getting anywhere

  • As soon as a container has a link, I want this container to have a background color. That was my idea:

    with the new selector classes, use the has() selector.

    I set it up like this: .gbp-card–elevated :has(a):hover

    unfortunately this does not work. GP assigns a separate CSS class to the link container: gb-container-link

    I could now change gb-container-link with Global Styles. That would probably work? But I find the selector variant much smarter. Am I going the wrong way here?

  • Hi Sam,

    Do you mean you are adding other links to a container that has a container link?

    I don’t quite get the concept, can you tell me what you are trying to achieve? if just “As soon as a container has a link, I want this container to have a background color”, then .gbp-card–elevated :has(a):hover should work, the container link is also a link. Or do you want to exclude the container link?

  • The problem is exactly as stated: “As soon as a container has a link, I want this container to have a background color,” but unfortunately, it is not working for me. Have I missed something in the settings? Please find a screen recording attached that demonstrates the issue.

    Thank you very much.

  • “As soon as a container has a link, I want this container to have a background color,”

    If this is the case, why are you adding a :hover state to the selector? I’m confused.

  • Please excuse the confusion. I would like to achieve the following:

    If the container has a link, then it should change the background color on mouseover.

    If the container has no link, everything stays as it is. Even if you move the mouse over it

    I tested this, but i doesn’t work: https://app.screencast.com/ca5S8Phstr8M0

  • Hi there,

    when you create the selector check the Compound Selector option

    https://app.screencast.com/Jb1OPYygoR7hS

    this will then output the correct selctor:

    .gbp-cardelevated:has(a):hover

    Note that it will only work on the front end as we don’t render the container link <a> in the editor.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.