How style only active class in first ul block

first-child pseudo-class doesn't work because these 2 li tags with an active class are children of different parents. You can combine selectors like .list1 .active to target the only active element that is somewhere inside list1.

I do not completely understand the question but you can select li.active in different lists (list1 & list2) in this way. See also https://jsfiddle.net/yezb04L9/

Plz let me kwow if your question is not what I think it is.

.wrapper {
  font-size: 20px;
}
.wrapper .list1 li.active {
  color: red;
}
.wrapper .list2 li.active {
  color: blue;
}

<div class="wrapper">
  <ul class="list1">
    <li>1</li>
    <li class="active">2</li>
    <li>3</li>
  </ul>
  <ul class="list2">
    <li>4</li>
    <li class="active">5</li>
    <li>6</li>
  </ul>
</div>