Effect for Pseudo-Class(Ex: :first-child) doesn't show live preview in the editor

Hi!

I noticed something when I styled the 1st item in the element.

I have a container which contains two buttons in it. Both have the same global class. However, when I add some styling for the first button with the :first-child pseudo-class, it doesn’t show the styling in the editor. Anyway, It works well on the front end.

Editor View

Frontend View

The editor should render everything in the editor for what we have added to the site.

Highlight: I also noticed that the editor doesn’t render the custom CSS we added to the editor. Anyway, it also worked well on the front end.

When I styled the hover effect, the editor didn’t turn the item to hover mode.
As a result, I had to hover over the item to see the effect I had styled, which was not good.

Can confirm it’s not working.
Seems to be related to global classes, since it’s working with block classes.
It doesn’t get added in the back-end’s styling rules.
Maybe you want to create a bug report?

Some thoughts:
Why don’t you just use the gap property on the parent container?
I think that’s the way to go, since it comes with some benefits.
One of them is the ability to stack the buttons vertically on smaller screens by only changing the flex direction.
In your current setup you would need to override the margin-right and then set a margin-bottom.

But I can see also why you would add it to a global class. It’s just a suggestion.

1 Like

True. I always forget about the gap property as I used to style them this way. :sweat_smile:

I will switch this thread to bug category.

@Louis @Araminta

I assume this thread was being overlooked?

Hello @jornes,

Thanks for the report.

I’ll try to go through every item, please let me know if I’m missing anything.

  1. :first-child styles are not applied correctly on the backend.

    • Correct. This is currently a limitation with how we’re rendering styles for blocks (<style> tag above the block itself, which is considered a sibling). We are looking at the different solutions available to us. I appreciate this is an issue. Rest assured it is something we’re looking to improve in the coming updates.
  2. The editor doesn’t render the custom CSS added to the editor.

    • I’m going to have to ask you to detail this part a bit more as I can’t quite comprehend what you’re referring to exaclty. Is this custom CSS within a Cwicly block? Global stylesheet not rendering?
  3. Styling hover effect doesn’t show the hover preview, having to hover over the element to see the changes.

    • This would apply to global classes only if I’m not mistaken, please confirm otherwise.
      In any case, thanks for bringing this up as it is something that will be worked on very soon to provide a seamless experience.

Thanks for taking the time to point these issues out @jornes. We really do appreciate it. If I’ve missed anything, please let me know.

1 Like

Hi @Louis
Thank you for the response! I appreciate it.

Well! Regarding this, I inserted a custom CSS code into a specified block, but the editor didn’t render anything based on what I inserted(but it worked on the front end).

Refer to the screenshot:

Thank you for confirming this! Looking forward to the fixed version.

About the hover state, yes! It’s only happened to global classes. It worked with default classes.

Hope this helps you figure out the issue we’re experiencing.
I appreciate the quick updates you’ve done, as always!s

In this particular case, this is more related to a specificity issue than custom CSS not rendering in the editor, but thanks for pointing it out.

contact__list li {align-items: flex-start;}

The contact__list is a global class. I tried the default and global class and they did not render in the editor.

At the same time, I hope that you could add this setting to the icon list. So we can just choose from there.

Hi @Louis

Just read the new changelog. Thank you for adding this promptly!

  • Improvement: List block icons align property

Awesome!! :clap: :clap: :clap: :blush:

1 Like

Hi @jornes,

Thanks for the positive message, much appreciated.

No worries, the other issues are being worked on!

2 Likes