How style only active class in first ul block-CodePudding

how set color for li.active 2, this is doesn`t work for first-childenter image description here

CodePudding user response：

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.

CodePudding user response：

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 >
  <ul >
    <li>1</li>
    <li >2</li>
    <li>3</li>
  </ul>
  <ul >
    <li>4</li>
    <li >5</li>
    <li>6</li>
  </ul>
</div>