CODEWITHSUNDEEP
cssangularangular6
user1687891
user1687891

Reputation: 864

How to add style to first element of ul?

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. 

.ts

this.skills.push({title: 'Play button clicked'});

.html

    <div class="column" class="steps">
        <h2>Steps:</h2>
        <ul *ngFor = "let post of skills" >
            <li>{{ post.title}}</li>
        </ul>
    </div>



.css

.steps li:first-child { 
    background-color: yellow;
}
.steps li:not(::first-line) {
}

My problem is this css is added to all the li added. I dont want to show different css to li excluding first one.

Upvotes: 1

Views: 2156

Answers (2)

Debojyoti
Debojyoti

Reputation: 4841

Pure Angular way

HTML

<ul>
  <li *ngFor="let item of array(9); let i = index" [class.firstElem]='i==0'></li>
</ul>

TS

  array(n) {
    return Array(n);
  }

CSS

.firstElem {
  color : red;
}

Working example in stackblitz.com

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42354

Your current selector (.steps li:first-child) is perfectly fine; the problem is that you have two class attributes on your <div> element (<div class="column" class="steps">), which is invalid HTML. Combining the two into one attribute fixes the problem, as can be seen in the following:

.steps li:first-child {
  background-color: yellow;
}
<div class="column steps">
  <h2>Steps:</h2>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

If you want to have multiple <ul> elements, but only want the first child of the first <ul> element to be highlighted, you'll want .steps ul:first-of-type li:first-child:

.steps ul:first-of-type li:first-child {
  background-color: yellow;
}
<div class="column steps">
  <h2>Steps:</h2>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

Upvotes: 3

Related Questions