How to apply css to three different classes hovering one of them

Question

Here is my code.

<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>

I want to apply css to all div's when mouse hover the first div with class start.

Answer 1

With the current HTML structure you can use couple of sibling selectors for this.

.start:hover ~ div {
    color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
    color: inherit;
}

Demo: http://jsfiddle.net/3c6V6/1/

However I would recommend to change HTML structure if you can. For example:

<div class="start">start</div>
<div class="middles">
    <div>middle-1</div>
    <div>middle-2</div>
    <div>middle-3</div>
    <div>middle-n</div>
    <div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>

and CSS:

.start:hover + .middles > div {
    color: red;
}

You would just have much more flexibility.

Demo: http://jsfiddle.net/3c6V6/2/