title: How to select first set of <li> to add a pseudo class to, but not the nested <li>s
body: <p>I've added a custom image to replace the bullet-list li. I've added it as a pseudo-class using ::before. However, I am not able to target only the first set of "li"s. Is it not possible with psuedo-classes? I have already tried targeting the first set of li::before like this with no success:</p>
  
  <p>.hand-bullet-list > ul > li::before{</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hand-bullet-list ul{
      list-style-type: none;
      margin-left: 0px;
  }
  
  .hand-bullet-list ul li{
      list-style: none;
      position: relative;
      padding: 0 0 22px 40px;
      margin-bottom: 20px;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      break-inside: avoid;
  }
  
  .hand-bullet-list ul li::before{
      background: url(https://jeremybullocksafeschools.com/wp-content/uploads/3.png) no-repeat;
      content: "";
      width: 40px;
      height: 42px;
      position: absolute;
      left: 0px;
      top: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hand-bullet-list bullet-list-two-columns"&gt;
  &lt;p&gt;&lt;strong&gt;Committee&lt;br /&gt;
  &lt;/strong&gt;Some text.&lt;/p&gt;
  &lt;p style="font-weight: 400;"&gt;&lt;strong&gt;Members of Committee include&lt;/strong&gt;&lt;/p&gt;
  &lt;ul style="font-weight: 400;"&gt;
  &lt;li&gt;Member 1&lt;/li&gt;
  &lt;li&gt;Member 2&lt;/li&gt;
  &lt;li&gt;Group 1
  &lt;ul&gt;
  &lt;li&gt;Group 1a&lt;/li&gt;
  &lt;li&gt;Group 1b&lt;/li&gt;
  &lt;li&gt;Group 1c&lt;/li&gt;
  &lt;li&gt;Group 1d&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Member 3&lt;/li&gt;
  &lt;li&gt;Member 4&lt;/li&gt;
  &lt;li&gt;Member 5&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>