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


i have tried possible ways mentioned on css selectors, have not managed change style of labels inside fieldset element. please inform me 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> 


tried lots of different combinations of css selectors in order apply styles labels inside fieldset elements below:

css:

fieldset > label {         text-align: left !important;         }  fieldset + label {         text-align: left !important;         }  div.row fieldset > label {         text-align: left !important;         } 

update : here 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 brevity -->                  </fieldset>                                 </div>         </div>     </div> </div> </div> 

it's simple as

fieldset label {   text-align: left; } 

the reason why css wasn't working because targetting wrong elements. want general descendant fieldset. level of children affected.

you simplified html is:

<fieldset>  <legend />  <div>    <label/>  </div> </fieldset> 

fieldset > label finding label direct child of fieldset. since have wrapped in div, not true.

fieldset + label looking label sibling of fieldset (on same level). label child of fieldset rule doesn't target want.

for more info on selectors in css take quick read of https://developer.mozilla.org/en-us/docs/web/guide/css/getting_started/selectors.

small tip: in general want avoid using !important declaration override changes want make in future.


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -