Will CSS attribute selector work to style this element?

Question

I have the following 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>

I trying to work out how to style the 'label' element without being able to change the html.

Ideally I'd like to style all 'label' elements that come before 'textarea' elements but I don't think it is possible using just CSS.

I thought this attribute selector would work:

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

but no, any ideas?

Answer 1

It works. To see it in action, try changing the color. Anyway, if you want the width to be 100%, I would suggest adding display: block;

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

Answer 2

Use two classes for ex:- 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

Use the selector:

.bf_form_row label
{
styles
}

This will select all label elements inside the parent with class of bf_form_row .

Hope that helps :)