html - How to use CSS first-child but excluding text content

Question

This snippet doesn't work the way I expect:

div li span:first-child {
  font-weight: bold;
}

<div>
  <ul>
    <li><span>This is a test</span></li>
    <li>And <span>this is also a test</span></li>
  </ul>
</div>

Answer 1

As far as I can tell, no, you cannot differentiate between elements with or without a sibling text node using CSS alone:

div li span:first-child {
  font-style: italic;
}

div li:first-child span {
  font-weight: bold;
}

div li:empty span:first-child {
  color:red;
}

div li span:only-child {
  font-size: 20px;
}

<div>
  <ul>
    <li><span>This is a test</span></li>
    <li>And <span>this is also a test</span></li>
    <li><span>another test</span></li>
  </ul>
</div>