Будет ли работать селектор атрибутов CSS для стилизации этого элемента?

Question

У меня есть следующий HTML:

<div class="bf_form_row">
    <label for="findout">Text goes here</label>
<textarea class="findOut" cols="40" id="findout" name="findout" rows="10"></textarea>
</div>

Я пытаюсь понять, как стилизовать элемент 'label', не имея возможности изменить html.

В идеале я бы хотел стилизовать все элементы 'label', которые идут перед элементами 'textarea', но я не думаю, что это возможно, используя только CSS.

Я думал, что этот селектор атрибутов будет работать:

label[for="findout"] {
    width: 100%;
}

а нет, есть идеи?

Answer 1

Работает. Чтобы увидеть это в действии, попробуйте изменить цвет. В любом случае, если вы хотите, чтобы ширина была 100%, я бы предложил добавить display: block;

label[for="findout"] {
    display: block;
    width: 100%;
}

Answer 2

Используйте два класса для примера: - 1] before_textarea 2] after_textarea

.before_textarea {
    width: 100%;
   // style to label which comes before teaxtarea
}

.after_textarea {
    width: 100%;
   // style to label which comes after teaxtarea
}

Answer 3

Используйте селектор:

.bf_form_row label
{
styles
}

Это выберет все элементы метки внутри родительского элемента с классом bf_form_row.

Надеюсь, это поможет:)