Как добавить стиль к первому элементу ul?

Question

Я добавляю список в начало массива, который я отображаю в HTML, используя li. Теперь я пытаюсь добавить CSS к первому ребенку Ли. Я попробовал следующий код.

.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) {
}

Моя проблема в том, что этот CSS добавлен ко всем добавленным ли. Я не хочу показывать разные CSS для li, за исключением первого.

Answer 1

Чисто угловой путь

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;
}

Рабочий пример в stackblitz.com

Answer 2

Ваш текущий селектор (.steps li:first-child) в порядке; проблема в том, что у вас есть два class атрибута для вашего <div> элемента (<div class="column" class="steps">), который является недопустимым HTML. Объединение двух атрибутов в один устраняет проблему, как показано ниже:

.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>

Если вы хотите иметь несколько элементов <ul>, но хотите, чтобы был выделен только первый дочерний элемент первого элемента <ul>, вам понадобится .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>