Why does Webflow wrap text with a div instead of a span when using the CSS selector ".class > span" in custom code? How can I get around this?
Webflow wraps text with a `
When you apply the `.class > span` selector in Webflow, it assumes that you want to style specific spans located within the elements that have the given class. But because Webflow uses a block-level wrapper for consistency, it automatically generates a `
If you need to style specific spans without the wrapping `
1. Adjusting the structure:
- Instead of relying solely on the CSS selector, you can modify the structure of your HTML elements in the Webflow Designer. By nesting the desired spans within a parent element (such as a `
`, or custom class), you can target them without the added `
2. Alternative CSS selectors:
- If you specifically need to target the spans directly, you can use other CSS selectors that are compatible with Webflow's code output. For example, you could use `.class span` without the `>` child selector. This will target any `` elements within the elements having the specified class.
- Another option is to assign a unique class directly to the spans you want to style, and then use that specific class in your custom code without any child selectors. This way, you can target those spans without unnecessary wrappers.
It's important to note that while these workarounds can help you achieve the desired styling, they may require modifying the structure or adding custom classes to your HTML markup. Be cautious when implementing changes to ensure they align with web standards and accessibility guidelines.