CSS presedence of selector over class

Question

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

.bigger {
    font-size: 14px
}

<div class="formWrap">
    <input type="text" class="bigger" />
</div>

Why does the above not make the text of the input field 14px?

When I am using the input[type="text"] selector how can I target a particular class that is a child of formWrap?

Is there a better method to give all my inputs a particular style then be able to make adjustments to certain inputs (hopefully based on a class)?

Answer 1

The first selector has higher specificity than the .bigger class.

To increase the specificity of the .bigger class, you could do this:

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

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

OR (Not really recommended):

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