I know a lot of people who are doing it this way...
and Yes it does render correctly in the browser...
and Yes. I understand it's not semantically correct.
What I was trying to figure out
- is why Webflow is inserting an extra DIV into the code.
<div class="test1"><div>this is my text</div></div>
From what you are saying...
- Webflow is not allowing us to create semantically incorrect code.
Which is fine... I can agree with what you said and the reasoning.
So the next question would be is
- "how do I get the result I need without that extra DIV" ?
In turn... I started thinking about what you said...
- which was basically "you have to do correctly".
So what I ended up trying was...
I dropped a paragraph inside the div...
- then highlighted the paragraph and made the entire text a span.
what I got was this
<div class="test3"><p><span>this is a test</span></p></div>
Notice there is no extra DIV.
So in order to create semantically correct code (in Webflow)
- and avoid Webflow adding the extra DIV...
---- you need to use a paragraph element inside the DIV
---- then highlight the text - and create a span from it.
- (if you directly wanted to target something inside the span)
- the associate css targeting code would be
.test3 > p > span ...