How to styles labels only within fieldsets using CSS? - css

Question

I have tried all the possible ways mentioned on CSS Selectors, but I have not managed to change the style of the labels that are only inside fieldset element. Could you please inform me what I did wrong?
View:
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-8 portfolio-item">
<fieldset>
<legend>Details</legend>
<div class="col-md-4 portfolio-item" >
#Html.LabelFor(m => m.ID):
#Html.DisplayFor(m => m.ID)
<br />
#Html.LabelFor(m => m.Name):
#Html.DisplayFor(m => m.Name)
<br />
#Html.LabelFor(m => m.Surname):
#Html.DisplayFor(m => m.Surname)
<br />
</div>
<div class="col-md-8 portfolio-item" >
#Html.LabelFor(m => m.Department):
#Html.DisplayFor(m => m.Department)
<br />
#Html.LabelFor(m => m.Address):
#Html.DisplayFor(m => m.Address)
<br />
#Html.LabelFor(m => m.City):
#Html.DisplayFor(m => m.City)
<br />
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
I tried lots of different combinations of CSS Selectors in order to apply the styles only the labels inside fieldset elements as below:
Css:
fieldset > label {
text-align: left !important;
}
fieldset + label {
text-align: left !important;
}
div.row fieldset > label {
text-align: left !important;
}
Update : Here is rendered Html code
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-8 portfolio-item">
<fieldset>
<legend>Details</legend>
<div class="col-md-4 portfolio-item">
<label for="ID">ID</label>:
200
<br>
<label for="Name">Name</label>:
Smith
<br>
<label for="Surname">Surname</label>:
Boyton
<br>
</div>
<!-- removed for brevity -->
</fieldset>
</div>
</div>
</div>
</div>
</div>

Answer 1

It's as simple as
fieldset label {
text-align: left;
}
The reason why your css wasn't working is because you were targetting the wrong elements. What you want is a general descendant for the fieldset. So any level of children will be affected.
You simplified HTML is:
<fieldset>
<legend />
<div>
<label/>
</div>
</fieldset>
fieldset > label is finding a label that is the direct child of the fieldset. But since you have wrapped it in a div, this is not true.
fieldset + label is looking for a label that is a sibling of the fieldset (on the same level). The label is a child of the fieldset so this rule doesn't target what you want.
For more info on selectors in CSS take a quick read of https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors.
Small tip: in general you want to avoid using the !important declaration as it could override any changes you want to make in the future.

Answer 2

It should be just:
fieldset label {
text-align: left;
}
The '>' symbol is the direct child selector i.e. theres a DIV between your fieldset and label which would be the direct child of fieldset
Also the '+' symbol is the next sibling selector which is why that won't work