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.

GeneratePress GenerateBlocks

Custom selector

  • erwinmedia
    March 6, 2025 at 7:32 am

    I am currently building a website with GB 2.0. It looks really cool, but a lot has also changed. I’m looking for a solution for the following situation:

    I have a container inside another container. The inner container contains a background image. I assign a CSS class to this container, for example, “x”.

    I want this background image to have an effect when I hover over the outer container. Previously, I did this using a custom selector, where I specified the class of the inner container.

    I no longer see the option for a custom selector.

    How can I solve this now?

  • Ying
    March 6, 2025 at 11:03 am

    Hi there,

    1. Select the outter container, go to the style panel, click the More button at the top of the right sidebar to open the selectors panel, click +New to create a new selector, then enter :hover .x in the selector field, toggle the Compond selector option, it will create a selector as .gb-element-xxxxx:hover .x.

    2. Now you can add your effect to this selector.

    Let me know if everything is clear 🙂

  • erwinmedia
    March 7, 2025 at 1:50 am

    Hi Ying, thanks. That worked. Can you please check the url and tell me how I can keep the image inside the blue box?

  • Ying
    March 7, 2025 at 8:55 am

    You can select the container with class gb-element-b1ec905b and set overflow-y to hidden.

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