html - CSS presedence of selector over class -

.formwrap input[type="text"] {     font-size: 12px;     }  .bigger {     font-size: 14px }  <div class="formwrap">     <input type="text" class="bigger" /> </div> 

why above not make text of input field 14px?

when using input[type="text"] selector how can target particular class child of formwrap?

is there better method give inputs particular style able make adjustments inputs (hopefully based on class)?

the first selector has higher specificity .bigger class.

to increase specificity of .bigger class, this:

.formwrap input[type="text"]{        font-size: 12px;  }  .formwrap input[type="text"].bigger{        font-size: 14px } 

or (not recommended):

.bigger{ font-size: 14px !important; }