CSS / Less / Sass - 在以下情况下匹配每个兄弟姐妹：悬停

Question

In this code:

<div id="Container">
  <span class='first'>First</span>
  <span class='second'>Second</span>
  <span class='third'>Third</span>
</div>

I want to change color, when :hover .

1. IF ( .first:hover ) THEN .first { color: red; } .first { color: red; }
2. IF ( .second:hover ) THEN .first, .second { color: red; } .first, .second { color: red; }
3. IF ( .third:hover ) THEN .first, .second, .third { color: red; } .first, .second, .third { color: red; }

Is this possible without JS? I can accept CSS Hacks :)

---

Possible answers:

1. @panther 's answer

---

More difficult version:

<div id="Container">
  <span class='first' style='color: red'>First</span>
  <span class='second' style='color: green'>Second</span>
  <span class='third' style='color: blue'>Third</span>
</div>

1. IF ( .first:hover ) THEN .first { color: pink; } .first { color: pink; }
2. IF ( .second:hover ) THEN .first, .second { color: pink; } .first, .second { color: pink; }
3. IF ( .third:hover ) THEN .first, .second, .third { color: pink; } .first, .second, .third { color: pink; }

---

Answers:

1. @Armfoot 's answer seems to be good :)

Answer 1

In CSS there is no previous sibling selector, but... you can sometimes do it using known selectors. Sometimes.

<style>
    span {color: #000; display: block;}
    div:hover span {color: #f00;}
    span:hover ~ span {color: #000}
</style>

<div id="FirstSecondThird-Container">
    <span class='first'>First</span>
    <span class='second'>Second</span>
    <span class='third'>Third</span>
</div>

https://jsfiddle.net/45zLdcvr/

It works with block span s (of floated, of course). With span s has default display: inline it will blink when you will hover div in space between spans.

UPDATE :
You updated the question when each span has own color, then it could be:

span {color: red}
.second {color: green}
.third {color: blue}

span {display: block;}
div:hover span {color: pink;}
span:hover ~ .second {color: green}
span:hover ~ .third {color: blue}

https://jsfiddle.net/45zLdcvr/1/

Answer 2

I figured out a way with @each in SASS based in panther's answer :

$containerID: FirstSecondThird-Container;
##{$containerID}:hover span {color:pink} 
@each $spanclass, $spancolor in (first, red), (second, green), (third, blue) {
  ##{$containerID} span:hover ~ .#{$spanclass}, .#{$spanclass} {
    color: #{$spancolor};
  }
}

It's a little bit shorter but here's the result (generated CSS):

 #FirstSecondThird-Container:hover span { color: pink; } #FirstSecondThird-Container span:hover ~ .first, .first { color: red; } #FirstSecondThird-Container span:hover ~ .second, .second { color: green; } #FirstSecondThird-Container span:hover ~ .third, .third { color: blue; } span {display: block;} /* this line was not generated, it's just to place them vertically */ 

 <div id="FirstSecondThird-Container"> <span class='first'>First</span> <span class='second'>Second</span> <span class='third'>Third</span> </div> 

Which has similar CSS rules to panther's fiddle .

Nice challenge 123qwe :)

Answer 3

This is what i think can do what you're looking to achieve neatly

@mixin color_on_hover($class){

@if $class==first {span:nth-of-type(1){color:red;}}
@else if $class==second {span:nth-of-type(1), span:nth-of-type(2){color:red;}}
@else if $class==third {span:nth-of-type(1), span:nth-of-type(2), span:nth-of-type(3){color:red;}}

}
span.first:hover{
@include color_on_hover(first);
}
span.second:hover{
@include color_on_hover(second);
}
span.third:hover{
@include color_on_hover(third);
}

Hope it helps !