A good use for the * selector as a compound selector?

Question

I'm working through some CSS course materials, and the instructor has given some examples of selectors... two examples that were given and caught my attention:a b {} and a * b {}

I was thinking that a * b seems somewhat redundant. To select all elements that qualify 'b' that are descendants of any element (*) that are descendants of 'b', is pretty much just the same as saying that they are descendants of 'a'.

Can anyone enlighten me to the purpose of a * b? Thanks!

Answer 1

• .a * .b will match .b only if there's some container between the two.
• .a .b will also match .b contained in .a as a direct child

.a * .b {
  background: blue !important;
  color: white;
}

.a .b{
  background: red;
}

/*-------------*/

.b {
  border: solid 1px black;
  margin-bottom: 10px;
}

div.container {
  border: none;
}

*{
  font-size: 1.5rem;  
}

<label>Case 1 (both rules match)</label>

<div class="a">
  <div  class="container">
    <div class="b">
      target
    </div>
    <div>      
    </div>
  </div>
</div>

<hr>

<label>Case 2 (only rule '.a .b' matches)</label>

<div class="a">  
  <div class="b">
    target
  </div>    
</div>

<hr>

<label>Case 3 (both rules match)</label>

<div class="a">  
  <div class="container">
    <div class="container">
      <div class="container">
        <div class="b">
          target
        </div>    
      </div>
    </div>
  </div>
</div>