How to style labels only within margins using CSS?
I've tried all the possible ways mentioned in CSS Selectors , but I haven't been able to change the style of the labels that are only inside fieldset
. Could you tell 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 many different combinations of CSS selectors to only apply styles to labels within elements fieldset
, as shown below:
Css:
fieldset > label {
text-align: left !important;
}
fieldset + label {
text-align: left !important;
}
div.row fieldset > label {
text-align: left !important;
}
Update: HTML is displayed here
<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>
It's as easy as
fieldset label {
text-align: left;
}
The reason your css was not working is because you were targeting the wrong elements. What you want is a common descendant for a set of fields. Thus, any level of children will be affected.
You have simplified the HTML:
<fieldset>
<legend />
<div>
<label/>
</div>
</fieldset>
fieldset > label
finds a label that is a direct descendant of a fieldset. But since you wrapped it in a div, it doesn't.
fieldset + label
looks for a label that is a sibling of a set of fields (at the same level). The label is a child of the fieldset, so this rule doesn't target what you want.
For more information on CSS selectors, read https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors .
A quick tip: in general, you shouldn't use a declaration !important
, as it might override any changes you want to make in the future.
It should be simple:
fieldset label {
text-align: left;
}
The '>' character is a direct child selector, i.e. A DIV between your fieldset and a label that would be a direct descendant of the fieldset
Also the "+" character is the next selector which doesn't work