Question

Given the following html block

<div><span></span><span></span><span></span>
    <div><span></span><span></span><span></span></div>
</div>​

and this css for it

span {
    display: inline-block;
    width: 70px;
    height: 50px;
}
div > div > span { visibility: hidden; }
span:not(:first-child) { margin-left: 5px; }
span:first-child {background-color: red;}
span:nth-child(2) {background-color: green;}
span:nth-child(3) {background-color: blue;}

span:nth-child(1):hover ~ div span:nth-child(1),
span:nth-child(2):hover ~ div span:nth-child(2),
span:nth-child(3):hover ~ div span:nth-child(3)
{ visibility: visible; }
​

Can you rewrite the last rule using some smart css so that it always makes visible the nth-child from the inner div for the N you are currently hovering in the outer one, no matter how many div’s there are?

Demo in this fiddle http://jsfiddle.net/E34ay/3/

In other words I would like something like:

span:nth-child(N):hover ~ div span:nth-child(N) { visibility: visible; }

but which will match only the already matched N not all the children (first N = second N)

This is for a gallery that will act like this http://jsfiddle.net/2zFsf/

Answer 1

In a case like this where CSS alone isn’t powerful enough for what you want to do, SASS (or SCSS) can really help you out.

Using the @for control directive, it’s as simple as changing one number to scale up:

@for $i from 1 through 3 {
  span:nth-child(#{$i}):hover ~ div span:nth-child(#{$i}) { 
      visibility: visible; 
  }
}

Which compiles to your exact CSS. Change the 3 to however many spans you plan on having.

Demo