Условная ширина с CSS

Question

<div class="field"> 
    <label>Label</label> 
    <input type="text" name="" value=""> 
</div> 

<div class="field"> 
    <input type="text" name="" value=""> 
</div> 

Можно ли установить ширину на вход условно на основе метки. Так что, если метка существует:

.field label { 
    width:25%; 
} 
.field input { 
    width:75%; 
} 

еще:

.field input { 
    width:100%; 
} 

Я мог бы сделать это с Javascript, но хотел бы знать, если его можно только с помощью CSS.

Answer 1

general sibling selector (~) выполняет именно то, что вы хотите. Он в основном выбирает второй элемент, только если ему предшествует первый элемент.

Попробуйте так:

.field label { 
 
    width:25%; 
 
} 
 

 
/* Default style */ 
 
.field input { 
 
    width:100%; 
 
} 
 

 
/* If preceded by a label, input gets different style */ 
 
.field label ~ input { 
 
    width:75%; 
 
}

<div class="field"> 
 
    <label>Label</label> 
 
    <input type="text" name="" value=""> 
 
</div> 
 

 
<div class="field"> 
 
    <input type="text" name="" value=""> 
 
</div>

Update: Просто понял, что вы также можете использовать adjacent sibling selector (+) ЕСЛИ label гарантированно непосредственно перед входной сигнал. Общие селекторные ролики (~) являются частью CSS3, поэтому могут не работать в несовместимых браузерах, в то время как смежные селекторные ролики (+) являются частью CSS2.