Change CSS without defining a class

Design help General
1

Hello,

I’m trying webflow and this is very impressive. Great work to the team !

However I wonder how to design elements without define them a class.

For example I have a list, I gave a “my-list” class to the ul element.

I should be able to design all “li” elements thanks to .my-list li { }, but on the webflow interface, I’m obliged to give a class to “li” elements to be able to design them. If I have some links into that list, then I have to give a class to all “a” elements.

This results to a lot of classes “my-list, my-list-li, my-list-a” etc… whereas I could just give a class to the parent.

Did I miss a webflow feature to do that more easily or it is a missing one ATM ?

2

Hi @Zmove, thanks for your message. At the moment, the css styles you apply to a list, will only apply to the UL and not to each LI in the list. If you want to setup a style that will affect all items in a list, then you can use some custom css and include that to the HEAD section of your site, as shown on this article to add custom code:

3

2 years later. Is this still the only way to achieve what the original poster wanted to achieve?

Cheers

1 Like
4

Hello, @makloon.

For now, you are able to style many elements without applying classes:

  • paragraphs,
  • unordered and ordered lists,
  • list items,
  • links,
  • headers,
  • blockquotes,
  • images,
  • forms,
  • labels.

You can find this option when you click on the Selector field

Also, Webflow has a Rich Text Element (RTE), which required only class name to itself, and all elements inside will be styled like a tags inside the particular RTE.
For example, I gave a class name “main-content” to the RTE. So in CSS, styling elements inside will look like this:
.main-content p {
…
}
.main-content h3 {
…
}