CSS selector directate sibling

Question

Мне нужен очень специфический селектор css, который выберет элемент кнопки в определенных ситуациях. Только при нажатии кнопки следует выбрать элемент <input type="text">, если необходимо выбрать кнопку.

Ниже приведены 3 примера, которые показывают, когда элемент должен быть выбран. Последний пример показывает сценарий, в котором не выбрана кнопка (как это не сразу следовать <input type="text"> элемент.

<!--button is selected--> 
<div> 
    <label>foo</label> 
    <input type="text" /> 
    <button></button> 
</div> 

<!--button is selected--> 
<div> 
    <label>foo</label> 
    <input type="text" /> 
    <label>foo</label> 
    <input type="text" /> 
    <button></button> 
</div> 

<!--button is selected--> 
<div> 
    <label>foo</label> 
    <input type="text" /> 
    <button></button> 
    <label>foo</label> 
    <input type="text" /> 
    <button></button> 
</div> 

<!--button is not selected--> 
<div> 
    <label>foo</label> 
    <input type="text" /> 
    <label>foo</label> 
    <select></select> 
    <button></button> 
</div> 

<!--first button selected, second button NOT selected--> 
<div> 
    <label>foo</label> 
    <input type="text" /> 
    <button></button> 
    <button></button> 
</div> 

Answer 1

• селектор входов типа
• селектор атрибута
• adjacent sibling combinator
• выбор типа кнопки

таким образом:

input[type=text] + button 

Или, если вы хотите поддерживать все текстовые входы (с текстом по умолчанию типа), вам необходимо добавить в a не оговорка по другим видам ввода:

input[type=text] + button, 
input:not([type]) + button { 
} 

Answer 2

использовать + селектор

p + div 

будет выбрать любой DIV сразу после P

Answer 3

Смежный родной брат - это то, что вы ищете здесь. Нечто подобное должно сделать трюк:

input + button { 
    /*do something*/ 
} 

Вот скрипка, расхваливая его: http://jsfiddle.net/z1y7mvnk/

Answer 4

Как вы хотите, чтобы выбрать кнопки, которые находятся рядом сибсами входов типа текста, вам необходимо объединить attribute selector с adjacent sibling selector, например, так:

input[type=text]+button{ 
    /* your styles here */ 
} 

в качестве альтернативы, если вы хотите, чтобы выбрать все кнопки, которые являются смежными сибсами любого входа с аналогичной функцией в том, что из ввода текста (например, пароль, номер, и т.д.), вам необходимо соединить вместе несколько negation pseudo classes, например, так:

input:not([type=checkbox]):not([type=radio]):not(...)+button{ 
    /* your styles here */ 
} 

В приведенном выше случае, это может быть просто проще дать ваши входы имя класса, а и использовать следующий селектор:

input.class+button{ 
    /* your styles here */ 
}