Support for nth-child, :before, :after, and other pseudo classes

They take good notice of everything on the Whilist here. And Pseudo elements aren’t a little thing to bring into Webflow, but definitely a need more than ever, now that we have dynamic lists.

So my advice is never to wait for features, work as if they don’t exist so you won’t be disappointed. As Webflow grows more and more complex it’s barely impossible for them to disclose any roadmap, that’s easily understandable.

I recommend to watch Nelson’s workshop with Webflow CEO Vlad Magdalin, a lot of things for Webflows’ future are disclosed in this video https://webflow.com/workshop/qa-with-webflow-ceo-vlad-magdalin

I absolutely need pseudo classes. It might be the only way to style different items in a dynamic list differently!

Hi Webflow,

I have a design that i’m using a dynamic list for, but I want to style every other element in the list differently. The design is 2 columns, with a text block on the left and an image on the right. Using a dynamic list I can only have the list items display in this manner. But I would like every other list item to switch the positions of the columns, so the text block is on the right and the image is on the left.

Since dynamic lists do not let me see the list items themselves in the DOM tree, it seems that there is no way of styling every other element…unless…

we could use nth child selectors, so then i could say, nth-child(even) and use flexbox to reverse the rows and achieve my design.

So, not sure if @webflow supports nth-child selectors, but if it does, i’m not sure how to do it…

…and if it does not, then, could we add that, pleeeeeease??? :grimacing:

CC: @PixelGeek whaadduup! :sunglasses:

R

2 Likes

Another vote here! Pseudo classes FTW

1 Like

I am looking to build out a speech bubble and I need pseudo classes. How can I still do this via custom code? I don’t quite understand. Have the CSS there and just simply enter the class in the interface? Any help will be very much appreciated.

The CSS:

.bubble
{
position: relative;
width: 290px;
height: 155px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.bubble:after
{
content: ‘’;
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
bottom: -15px;
left: 19%;
}

would anyone like to share the code for a basic pseudo class so a dropdown can look active?

1 Like

Yes please! Pseudo classes are in use so often nowadays, so this should be part of the interface.

+1 pretty standard CSS guys
Also inline CSS inline per page please…

1 Like

Hi All, I agree pseudo classes would be great in the webflow editor – from reading on this forum, it seems there are some difficult UI design challenges for the webflow guys to figure out first – I’m sure they’ll do a great job when they do but in the meantime, I found out the other day from @samliew that if you add an embed element to your page containing <style> [add pseudo classes here] </style>, the effects of the code will be reflected in the webflow preview.

Part of the pain for me was having to publish to see the effects of any pseudo classes I added as custom code – at least this way I can see the effects directly in the editor (it feels a bit weird adding <style> blocks outside of the <head> but I can get over that!).

I’m sure this is probably old news to some but finding this out has really helped me use pseudo classes until webflow figure out how to give support in the editor.

2 Likes

Terrific idea! That’s a useful hack.