Now that :has() is supported in all the major browsers, there is an easy way to target previous siblings using just CSS.

The text demonstration shows how to target the 1st, 2nd, 3rd, 4th, 5th, 6th and 7th previous siblings, by hovering any of the column of 'Sibling' text, using just 7 lines of CSS.

The 1st previous sibling uses the CSS p:has(+ p:hover) and the second previous sibling uses p:has(+ * + p:hover) further previous siblings just follow the same structure.

The second demonstration is the column of light grey boxes. Hover any of the boxes to enlarge it to x2 scale and change to black. The three boxes before the hovered box will also enlarge and change to a darker shade of grey. Also the three boxes after the hovered box will enlarge and change shade.

Move the hover to the next or previous box to see the boxes either side change to suit.

All this is achieved using just html and minimal css. No jQuery or javascript is necessary.