How to Cycle through Multiple Matches using CSS Selector?

Question

I have a CSS Selector which matches all the like buttons on Instagram. Say there are five posts on the screen, the CSS Selector will return five matches, but I'm not aware of the syntax required to cycle through the items one by one.

span.fr66n>button -> Returns 5 matches

Image of Selection

Could anyone please let me know how we can cycle through the matches?

Answer 1

Although not entirely a scripting language - you CAN cycle through items and assign an index and display that - CSS counters.

This is a display only feature - you cannot select an item - except manually via nth-of-type() or nth-child() etc, so if you want to target the selectors you will need js... but if you want to visually render an index associated with a list of items - totes possible

body {
  counter-reset: button;
}

button {
  position: relative;
  display: block;
  margin: 8px;
}

button::before {
  counter-increment: button;
  content: "Button " counter(button) ": ";
}

<p>Using CSS Counters</p>

<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>