Streaming live at 10am (PST)

Change CSS without defining a class


#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:

http://help.webflow.com/adding-custom-code


#3

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

Cheers


#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 {
...
}


#5