0

My question is about asterisk sign between css selectors. It seems asterisk can ignore selectors by the number of asterisks between two elements.

Example 1 : 

ul * li {
  color:red;
}
<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2</li>
      <li>Sub-item 2</li>
      <li>
        <ul>
          <li>Sub-item 3</li>
          <li>
            <ol>
              <li>Sub-item 4</li>
              <li>Sub-item 4</li>
            </ol>
          </li>
        </ul>
      </li>
    </ol>
  </li>
</ul>

Example 2 :

ul * * * li {
  color:red;
}
<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2</li>
      <li>Sub-item 2</li>
      <li>
        <ul>
          <li>Sub-item 3</li>
          <li>
            <ol>
              <li>Sub-item 4</li>
              <li>Sub-item 4</li>
            </ol>
          </li>
        </ul>
      </li>
    </ol>
  </li>
</ul>

Example 3 :

ul * * * * * * * li {
  color:red;
}
<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2</li>
      <li>Sub-item 2</li>
      <li>
        <ul>
          <li>Sub-item 3</li>
          <li>
            <ol>
              <li>Sub-item 4</li>
              <li>Sub-item 4</li>
            </ol>
          </li>
        </ul>
      </li>
    </ol>
  </li>
</ul>

Please consider my question is about asterisk between two elements and its behavior is different when use as selector *. Can anyone explain how how this happens? Thanks in advance.

Bahman Parsa Manesh
  • 2,314
  • 3
  • 16
  • 32

1 Answers1

1

The * is the universal selector. It matches any element.

It is being applied in conjunction with the descendant combinator.

So ul * li means "a li that is a descendant of any element that is a descendant of a ul". Or, in other words, "a li that is a descendant of a ul but not a child of the ul that the ul part of the selector matched".

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks for your reply, so `ul * li` represents grandchild of ul, `ul * * * li` represents grand grandchild of ul and so on. – Bahman Parsa Manesh Aug 30 '18 at 10:42
  • "represents grandchild of ul" — No. It's a descendant combinator, not a child combinator. It could be a grandchild, great-grandchild, etc. – Quentin Aug 30 '18 at 10:56