CSS - how to get elements of consecutive class-CodePudding

I have ten li having same class and between this having 4 consecutive class. how I can get the first, second, third and fourth element of consecutive class? with CSS

.abc {
  color: red;
}

.abc .xyz {
  color: yellow !important;
}

<ul>
  <li >abc</li>
  <li >abc</li>
  <li >abc</li>
  <li >abc xyz</li>
  <li >abc xyz</li>
  <li >abc xyz</li>
  <li >abc xyz</li>
  <li >abc</li>
  <li >abc</li>
  <li >abc</li>
</ul>`

CodePudding user response：

In this case try this

.abc.xyz:nth-child(4n - 4) {    
 color: yellow !important;
}
.abc.xyz:nth-child(4n - 3) {
 color: green !important;
}
.abc.xyz:nth-child(4n - 2) {
 color: purple !important;
}
.abc.xyz:nth-child(4n - 1) {
 color: blue !important;
}

CodePudding user response：

You were close ! Simply remove character

.abc {
  color: red;
}

.abc.xyz {
  color: yellow !important;
}

<ul>
  <li >abc</li>
  <li >abc</li>
  <li >abc</li>
  <li >abc xyz</li>
  <li >abc xyz</li>
  <li >abc xyz</li>
  <li >abc xyz</li>
  <li >abc</li>
  <li >abc</li>
  <li >abc</li>
</ul>

CodePudding user response：

const els = document.querySelectorAll('.abc');
els.forEach(e => {
  if (e.classList.contains('xyz')) {
    console.log(e, e.innerHTML);
  }
});

<ul>
  <li >abc</li>
  <li >abc</li>
  <li >abc</li>
  <li >abc xyz</li>
  <li >abc xyz</li>
  <li >abc xyz</li>
  <li >abc xyz</li>
  <li >abc</li>
  <li >abc</li>
  <li >abc</li>
</ul>