CSS use of '>' (greater than) and '*' (star)

Question

I'm currently trying to use Sequence.js, which is awesome so far. There is a line, that I struggle to interpret, though. It's this:

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

I found out that > means all directly descendants of the given class. So if it has said this

CSS

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

Then it would mean all li's that is just below the .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 -->

... Right?

And obviously * means all elements. But if > and * is combined, then is confuses me. So here's 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's say that I put a div in here (even 
   though I know it's not right), does this then 
   mean that this is blue?
 </div>
</ul>
</div> <!-- sequence -->

?

Answer 1

Your understanding is correct for them individually. When combined, it means all elements under the specified element (.seq-canvas in your example).

Here is a test. Notice that * alone will change the font size for everything, while > * will only change the color of the children of .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's say that I put a div in here (even 
   though I know it's not right), does this then 
   mean that this is blue?
 </div>
</ul>
</div>
<p>I'm also outside</p>

Important note: The color of the <span> in your example is the default black, not blue, because the > does not apply the blue color to it. The reason it appears in blue is because it inherits the color of the parent. Some CSS styles are inherited and some aren't. If your CSS is applying a style that isn't inherited, then the <span> will look different from its parent. Understanding that helps understand the meaning of > *. In your example, you only apply the color blue which is inherited, so simply specifying #sequence .seq-canvas without the > * will have the same effect visually. However, it only applies it to .seq-canvas and the children will inherit it, but visually it's the same. However, if you use a style that's not inherited, then you will see the difference between #sequence .seq-canvas and adding > *.

One style that is not inherited is the border. In the example below, I applied both color and border to #sequence .seq-canvas and #sequence2 .seq-canvas2 > *, so you can see that all children are blue in both cases (first one is inherited and second one is directly applied), but when it comes to the border, the first group of children don't have border because it's not applied to them and they don't inherit it, while the second group have borders because it was directly applied to them:

#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's say that I put a div in here (even 
   though I know it's 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's say that I put a div in here (even 
   though I know it's not right), does this then 
   mean that this is blue?
 </div>
</ul>
</div>
<p>I'm also outside</p>