Streaming live at 10am (PST)

Webflow unable to specify styles that select tag element or parent element in general


#1

Hi, I'm not sure if it's me being too new to webflow or it is a real problem:

Say I have a Navbar in a Container. The container has font color set to "red", no custom style for Navbar.

If I add a "Text block" element into the navbar, I can see it inherit the "red" color from Container.

But the link items of Navbar are not affected by the Container color property since there's no way to specify a style for "a"(link) tag element in a parent element. If I need to change the color of Navbar link items I need to add a class to each one of items in the Navbar.

This process to me is very unnatural for a web standard, and the resulting css is not as clean as possible as well.

Is this the way Webflow works? Or are there better process that I don't know?

Thanks guys

Nan


#2

There is not need to class each link as a differently. Call them all the same thing like 'navlink'.
In fact, you should try to class as many things the same as you can so that you can reduce CSS clutter!


#3

I understand there need not to be a lot of different classes in the exported css file, but I can't prevent the html file to be populated with class like "red-link" for all my "a" elements. Which is not the best practice in a web standard point of view.

In my opinion what Webflow lack the most is a way to combine tag element selector and class selector. There's no way to write style for ".navbar a" type of selector at the moment in Webflow, which is very essential part in the whole HTML-CSS system.


#4

Great point. I was also looking for exact this feature but was unable to find it.

Looks like for now we need to specify classes on the element level?

Would be great if we could select and style elements based on their parent container.


#5

This issue was mentioned in Richard Knight's article on Webflow on Smashing Magazine:


#6

I had this same problem when creating my first site with webflow. I'm in now way a coder, but I understand the basic function of how HTML and CSS works So since then

I made a page in the project called styles.
I then put every element that you can drop in from webflow and name the class that same name as the element being used. Then I styled the element with a good starting point that I would use most of the time for that website design. This made adding content later down the road much easier.

It would be nice if Webflow had every element worked like the body and Headings where yo don't have to add a class every time.


#7