Comment modifier les propriétés des frères et sœurs avec des sélecteurs CSS comme: focus?

Question

J'ai des problèmes avec du code sur mon site, http://ethoma.com/wp/. Dans la barre de recherche, sur le côté gauche, je veux que le gris foncé "hit enter to search" devienne gris clair quand le champ de recherche (son frère): focus est déclenché. Voici le code que j'ai actuellement:

#s 
{ 
    min-width:98%; 
    background-color:#2a2a2a; 
    color:#d3d3d3; 
    border:2px solid #000000; 
    font-size:.85 em; 
    height:1.9em; 
    display:inline !important; 
    border-radius:5px 5px 5px 5px; 
} 

#s:focus 
{ 
    border:2px solid #2a2a2a; 
} 

#searchsub 
{ 
    color:#2a2a2a; 
    text-align:right; 
    font-size:.65em; 
    font-weight:lighter; 
} 

#s:focus #searchsub 
{ 
    color:#cccccc; 
} 

D'accord, #s est le champ de recherche et #searchsub est le div que je veux tourner #CCCCCC (gris clair). Le dernier ensemble d'accolades semble être là où j'ai le problème (pas les accolades elles-mêmes, mais le sélecteur au-dessus). Comme je l'ai dit #s est un frère de #searchsub et vice versa. Merci pour vos réponses!

Answer 1

Comme l'a dit stefmikhail, l'espace dans votre sélecteur signifie #searchsub#s. En ce qui concerne HTML, cependant, cela est évidemment faux parce que les champs input sont des éléments vides et vous ne pouvez pas avoir d'autres éléments à l'intérieur.

Vous souhaitez utiliser le sélecteur de frères et soeurs à côté + place, puisque #searchsub est le frère qui vient après #s:

#s:focus + #searchsub 
{ 
    color:#cccccc; 
} 

Answer 2

Le problème avec votre code est que, en plaçant #searchsub après #s:focus dans #s:focus #searchsub, vous dire CSS d'agir sur l'id #searchsubintérieur l'id #s. Je suis d'accord avec JamWaffles que vous pouvez le faire avec JavaScript. Je le ferais avec jQuery, et si vous le souhaitez, je peux poster comment.