This is, in fact, mostly correct! And when I paste this exact code into my widget editor, I see the three moving arrows…it’s just that they’re waaaay down the screen:
Do note, that sometimes with complex
stylesheet properties like this, the widget editor’s autorefresh isn’t always reliable; if you’ve changed something and don’t see the expected result, hit the
Redraw link at the bottom or press
ctrl + r.
So now that it works, let’s clean it up a bit:
First, it’s moved so far down the page because of the positioning in the .arrowright block. Specifically: setting the position of the block to absolute means that instead of following the position set by it’s parent element, it is just placed in the upper-left corner of the view. Then the top: 10em moves the top of the element down from that starting point 10 * the text size (i.e., way down the page). For these testing purposes, you probably don’t need any of that positioning, although you may later when you want to put this on other widgets.
Second, this will all make a little more sense to you, I suspect, if you read up on css selectors (my first choice of css references is usually the w3schools.com site, but there are hundreds of good options). You’ll see that your
class: arrowright div
on the Label components isn’t very meaningful and isn’t contributing anything in this case (see my post a couple up with the completely blank Label components). If you’re using the Label components, then they ARE a div element already; that’s how they’re built. So, in your css the .arrowright div block first looks for every element that has the arrowright class (the . in front means this is a class name). If it finds something with that class (in this case the f7-row component) then it looks at the next part, div, and it knows to look for each div element that is inside (a child of) the element it just found with the arrowright class. If it finds any element matching that description (and it will if there are Label components in there) then it applies the styles in that block to that element. It never even has to look at the class of the Labels because it has already found its match.
In the two following blocks, the same process is used except instead of matching ALL the div elements inside the arrowright class element, it ONLY matches a div if it is the 2nd or the 3rd div in sequence.
