How to change the style of superior brothers?

Question

I have a parent element (div#workarea) that has four children: figure#start, p#first, figure#start2 and p#second:

<div id="workarea">
    <h1 id="title">Área de Testes</h1>
    <figure id="start">
        <img id="gear2" src="img/gear.png">
    </figure>
    <p id="first"></p>
    <figure id="start2">
        <img id="gear3" src="img/gear.png">
    </figure>
    <p id="second"></p>
</div>

I’d like to make sure that by setting up the third child (figure#start2), the first son (figure#start) acquire a transform:rotate(Xdeg).

How would that be possible?

I’ll apply the style in this example, where the figure#start is the first gear and the figure#start2 is the second gear. And his sequential brothers (p#first and p#second) correspond to bars that acquire a translateX.

Answer 1

Cannot do by CSS. Sibling selectors + and ~ only allow selecting later elements in the DOM. For example, it is possible to select the second gear in the first with #start:hover ~ figure, but otherwise the CSS does not let. You need to use Javascript.

Answer 2

Try to make the following code:

figure#start2:hover #start {
  -webkit-transform: rotate(80deg); /* Compatibilidade com o Google Chrome e Safari */
   -khtml-transform: rotate(80deg); /* Compatibilidade com todos os outros navegadores */
     -moz-transform: rotate(80deg); /* Compatibilidade com o Mozilla Firefox */
       -o-transform: rotate(80deg); /* Compatibilidade com o Opera */
          transform: rotate(80deg); /* Declarando a propriedade CSS */
}