Using CSS '>' (more) and '*' (star)

Question

I'm currently trying to use Sequence.js, which is still awesome. However, there is a line that I am trying to interpret. It:

#sequence .seq-canvas > *  {...}

I found out what >all directly descendants of this class mean. Therefore if he said it

CSS

#sequence .seq-canvas > li   {color: red}

Then it will mean all li that are just below .seq-canvas -element. Example:

HTML

<div id="sequence">
<ul class="seq-canvas">
  <li>This is red</li>
  <li>This is also red</li>
  <li>
    <ul>
      <li>This is not red?</li>
      <li>Neither is this?</li>
    </ul>
 <li>But this is red</li>
</ul>
</div> <!-- sequence -->

... Correctly?

And, obviously, it *means all the elements. But if> and * are combined, then it bothers me. So here is an example:

CSS

#sequence .seq-canvas > *  {color: blue;}

HTML

<div id="sequence">
<ul class="seq-canvas">
  <li>This must be blue</li>
  <li>So is this</li>
  <li>
    <ul>
      <li>But is this blue?</li>
    </ul>
 <li>This must also be blue...</li>
 <li>How about <span>SPANS</span> - will they be blue as well?</li>
 <div>Or let say that I put a div in here (even 
   though I know it not right), does this then 
   mean that this is blue?
 </div>
</ul>
</div> <!-- sequence -->

?

Answer 1

. (.seq-canvas ).

. , * , > * .seq-canvas:

#sequence .seq-canvas > *  {color: blue;}

* { font-size: 10px; }

<p>I'm outside</p>
<div id="sequence">
<ul class="seq-canvas">
  <li>This must be blue</li>
  <li>So is this</li>
  <li>
    <ul>
      <li>But is this blue?</li>
    </ul>
 <li>This must also be blue...</li>
 <li>How about <span>SPANS</span> - will they be blue as well?</li>
 <div>Or let say that I put a div in here (even 
   though I know it not right), does this then 
   mean that this is blue?
 </div>
</ul>
</div>
<p>I'm also outside</p>

Hide result

. <span> - , , , > . , , , . CSS , - . CSS , , <span> . > *. , , #sequence .seq-canvas > * . .seq-canvas, , . , , , #sequence .seq-canvas > *.

, , border. , #sequence .seq-canvas #sequence2 .seq-canvas2 > *, , ( , - ), , , , , , :

#sequence .seq-canvas  {color: blue; border: 1px solid green;}
#sequence2 .seq-canvas2 > * {color: blue; border: 1px solid green;}

* { font-size: 10px; }

<p>I'm outside</p>
<div id="sequence">
<ul class="seq-canvas">
  <li>This must be blue</li>
  <li>So is this</li>
  <li>
    <ul>
      <li>But is this blue?</li>
    </ul>
 <li>This must also be blue...</li>
 <li>How about <span>SPANS</span> - will they be blue as well?</li>
 <div>Or let say that I put a div in here (even 
   though I know it not right), does this then 
   mean that this is blue?
 </div>
</ul>
</div>
<div id="sequence2">
<ul class="seq-canvas2">
  <li>This must be blue</li>
  <li>So is this</li>
  <li>
    <ul>
      <li>But is this blue?</li>
    </ul>
 <li>This must also be blue...</li>
 <li>How about <span>SPANS</span> - will they be blue as well?</li>
 <div>Or let say that I put a div in here (even 
   though I know it not right), does this then 
   mean that this is blue?
 </div>
</ul>
</div>
<p>I'm also outside</p>

Hide result