Hey @Marius , I still have issues figuring out the syntax/how to use this free form relative styling. Hope you can help.
Technically, the idea is that:
.blockclass — is the selected block and it auto detect the class there like cc-btn?, or do I need to write something after?)
then the :pseudos — say if we want it to be :hover/:active/ :focus etc, correct?
So basically if I want to target an accordion svg icon, I would need to select the accordion block, enable relative styling, and the free form rule would be:
.blockclass svg :pseudos
So technically this works to target the svg icon of the accordion.
The issue is that I need it to work while the accordion is in active state. I thought about the :active in the pseudo selection, but in the video tutorial they target the cc-accordion-active?
I got mine to work with the visual builder after 1.5 hours lol so I’m hoping that if I can understand free-form rules better it will help my workflow
Thanks for the help in advance
You’ll want to keep the :pseudos class attached to its anchor element when using free-form rules, just like in CSS (it seems like there is a space between svg and :pseudos).
I don’t believe the :active state is what you’re looking for here because it refers to a user interactions with the anchor element. You can see more about that here: :active - CSS: Cascading Style Sheets | MDN
That’s why the video on the accordion block refers to the .cc-accordion-active class, as it provides the state of the accordion instead of the element the user might have interacted with.
The .blockclass always refers to either the block class or the selected global class:
The default classes that are attached to blocks like .cc-btn are not connected in a direct way when it comes to Relative Styling, although you can use it as a combinator.