Как изменить свойства братьев и сестер с помощью селекторов CSS, таких как: focus? - PullRequest
Новая
       32

Как изменить свойства братьев и сестер с помощью селекторов CSS, таких как: focus?

9 голосов
/ 29 августа 2011

У меня проблемы с каким-то кодом на моем сайте, http://ethoma.com/wp/. В левой части окна поиска я хочу, чтобы обычно темно-серый "удар по вводу в поиск" становился светло-серым, когда поиск поле (его родной брат): фокус срабатывает. Вот код, который у меня сейчас есть: 

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

Хорошо, #s - это поле поиска, а #searchsub - это div, который я хочу превратить в #cccccc (светло-серый). Последний набор фигурных скобок, кажется, там, где у меня возникла проблема (не сами скобки, а селектор над ней). Как я уже сказал, #s - это брат #searchsub, и наоборот.

Ответы [ 3 ]

15 голосов
/ 29 августа 2011

Как сказал stefmikhail, пробел в вашем селекторе означает #searchsub, это внутри #s. Что касается HTML, то это, очевидно, неправильно, поскольку поля input являются пустыми элементами, и внутри них не может быть других элементов.

Вместо этого вы хотите использовать соседний селектор брата +, поскольку #searchsub - это брат, который следует за #s: 

#s:focus + #searchsub
{
    color:#cccccc;
}
1 голос
/ 21 декабря 2018

Использование 

+

соседний братский комбинатор (только если он непосредственно следует за первым элементом) 

~

общий братский комбинатор (только если он следует за первым элементом (хотя не обязательно сразу)

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

0 голосов
/ 29 августа 2011

Проблема с вашим кодом заключается в том, что, помещая #searchsub после #s:focus в #s:focus #searchsub, вы говорите CSS действовать на id #searchsub внутри id #s.

Я согласен с JamWaffles, что вы можете сделать это с помощью JavaScript.Я хотел бы сделать это с помощью jQuery, и если вы хотите, я могу опубликовать как.

...