I've been experimenting with Sequence.js and finding it really impressive. There's one line of code that I'm having trouble understanding:
#sequence .seq-canvas > * {...}
I discovered that the > symbol selects only direct descendants of a specific class. So, if it were written like this:
CSS
#sequence .seq-canvas > li {color: red}
It would apply to all li elements directly under the .seq-canvas class. For example:
HTML
<div id="sequence">
<ul class="seq-canvas">
<li>This text is red</li>
<li>So is this one</li>
<li>
<ul>
<li>But what about this?</li>
<li>And this?</li>
</ul>
<li>However, this one is also red</li>
</ul>
</div> <!-- end sequence -->
... Are you following so far?
As for using * which targets all elements, it becomes confusing when combined with >. Here's an example:
CSS
#sequence .seq-canvas > * {color: blue;}
HTML
<div id="sequence">
<ul class="seq-canvas">
<li>This should be blue</li>
<li>As well as this one</li>
<li>
<ul>
<li>But is this considered blue?</li>
</ul>
<li>This one must also be blue...</li>
<li>What about <span>SPANS</span> - will they turn blue too?</li>
<div>Or let's say I insert a div here (even though
I know it's incorrect), does this mean it'll turn blue?
</div>
</ul>
</div> <!-- end sequence -->
Do you have any thoughts on this?