title: How to add style to first element of ul?
body: <p>I am appending an list to top of the array that I display in HTML using li. Now I am trying to add css to first child of li. I have tried the following code. </p>
  
  <pre><code>.ts
  
  this.skills.push({title: 'Play button clicked'});
  </code></pre>
  
  <p>.html</p>
  
  <pre><code>    &lt;div class="column" class="steps"&gt;
          &lt;h2&gt;Steps:&lt;/h2&gt;
          &lt;ul *ngFor = "let post of skills" &gt;
              &lt;li&gt;{{ post.title}}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
  
  .css
  
  .steps li:first-child { 
      background-color: yellow;
  }
  .steps li:not(::first-line) {
  }
  </code></pre>
  
  <p>My problem is this css is added to all the li added. I dont want to show different css to li excluding first one.</p>