Let’s say I drag a Social Icons widget on to the canvas. I create a custom class of social-icons and apply some styling. Then, to apply some :hover state styling for this class, I create a :hover pseudo class. At this point both my custom class and pseudo classes are active and I am editing them in the builder. I now have the option to add “Custom CSS”. Now, I assume this CSS applies to elements with the social-icons class in the :hover state. How do I target child elements in the Custom CSS area? As a test, I added:
%root% {
background_red;
}
And the entire element turned red in the editor, but did nothing (hover state or otherwise) on the front-end.
My question is how Custom CSS works in combination with pseudo elements. In your example, you have .social-icons active. What happens or what is the expected behaviour when you also have :hover pseudo class active and enter code in the Custom CSS field.
Let me rephrase the question with a better use case example.
Suppose I have a parent element and a child element. They both have classes added to them through Bricks (.parent and .child). I want to apply some specific styling to the .child element when a .parent is in the :hover state. How do I do that using the Bricks UI?
And, while .parent and :hover are selected, what is the scope of styles added to the Custom CSS field?
I might be getting the question wrong though. I has happened before
If you want, please share the section code from the builder here, I can check it later
I know what the CSS result should look like, but not how to use the pseudo stuff in the UI to achieve it.