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
Post a Comment