Linked Questions

Popular Questions

How to change the next N elements on hover in document

Asked by At

I think I am almost there but struggling with selecting elements that fall outside the :hover div

Here is the HTML:

<div class="cotainer">
<div class=box"><i>1</i><i>2</i><i>3</i><i>4</i></div>
<div class=box"><i>5</i><i>6</i><i>7</i><i>8</i></div>
</div>

Here is the CSS I am trying to use but failing:

.box:hover i:nth-child(-n+6){color:red;}

The problem is that only elements 1 to 4 change to red.

What is the solution to change elements 1 to 6? Thank you :)

Related Questions