How to styles labels only within fieldsets using 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