-
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):hovershould 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
:hoverstate 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):hoverNote that it will only work on the front end as we don’t render the container link
<a>in the editor.
- You must be logged in to reply to this topic.