Jak zmodyfikować właściwości rodzeństwa za pomocą selektorów CSS, takich jak: focus? - css, formularze, zdarzenia, fokus, selektory css

Mam problem z jakimś kodem w mojej witrynie, http://ethoma.com/wp/. W pasku wyszukiwania po lewej stronie chcęzwykle ciemnoszary „naciśnij Enter, aby wyszukać”, aby zmienić kolor na jasnoszary, gdy pole wyszukiwania (jego rodzeństwo): fokus zostanie wywołane. Oto kod, który aktualnie mam:

    #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;
}

Dobra, #s to pole wyszukiwania, a #searchsub todiv, który chcę włączyć #cccccc (jasnoszary). Ostatni zestaw nawiasów klamrowych wydaje się być tam, gdzie mam problem (nie same nawiasy klamrowe, ale selektor nad nim). Jak powiedziałem #s jest rodzeństwem #searchsub i odwrotnie. Dziękujemy za odpowiedzi!

Odpowiedzi:

Jak powiedział stefmikhail, przestrzeń w twoim selektorze oznacza #searchsub jest wewnątrz #s. Jeśli chodzi o HTML, jest to oczywiście błędne, ponieważ input pola są pustymi elementami i nie możesz mieć w nich innych elementów.

Chcesz użyć sąsiedniego selektora rodzeństwa + zamiast tego, ponieważ #searchsub to rodzeństwo, które przychodzi później #s:

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

Problem z twoim kodem polega na umieszczeniu #searchsub po #s:focus w #s:focus #searchsub, mówisz CSS, aby działał na podstawie identyfikatora #searchsub wewnątrz dowód osobisty #s.

Zgadzam się z JamWaffles, że możesz to zrobić za pomocą javascript. Zrobiłbym to za pomocą jQuery, a jeśli chcesz, mogę to opublikować.