Clever Geek Handbook

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>
+3


source to share


2 answers


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.

+7


source


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

+4


source






More articles:


All Articles