Обращение к первому элементу в колонке html

Question

Подскажите пожалуйста, как мне установить контент у первого элемента в колонке? Я имею следующий html код:

<div class="all">
    <div class="column">
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
    </div>
    <div class="column">
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
        <div class="item"><h2></h2></div>
    </div>
</div>

И в CSS пытаюсь установить значение для h2, но безуспешно

.all {
  .column {
    &:first-of-type {
      &:first-of-type {
        h2 {
          &:before {
            content: "///";
          }
        }
      }
    }
  }
}

Использую препроцессор sass. Подскажите пожалуйста, в чём у меня ошибка? Буду очень благодарен любой помощи

Answer 1

Можно так:

.all {
   & .column .item:first-child h2::before {
      content: "///";
   }
   & .column:nth-child(2n) .item:first-child h2::before {
      content: "###";
   }
}

БЛОГ НА HUSL

Обращение к первому элементу в колонке html

Ответы (1 шт):